twitter-bootstrap Bootstrap 列未出现内联
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23319906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap columns not appearing inline
提问by limp_chimp
I'm new to bootstrap and CSS in general. I have some html which looks like this:
一般来说，我是引导程序和 CSS 的新手。我有一些 html 看起来像这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Site</title>
<link rel="stylesheet" href="/css/bootstrap-theme.css">
<link rel="stylesheet" href="/css/font-awesome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1"><span class="fa fa-caret-down"></span></div>
<div class="col-md-1"><span id="cool-title">My Site</span></div>
<div class="col-md-1">
<input type="text" placeholder="Search" class="search-bar">
</div>
<div class="col-md-1">
<button class="btn btn-default"><i class="fa fa-search col-md-1"></i></button>
</div>
</div>
<div id="main">
</div>
</div>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
</body>
</html>
I want all of those col-divs to be inlined, but they are all showing up on their own rows:
我希望所有这些col-div 都被内联，但它们都显示在自己的行上：
What's going on here?
这里发生了什么？
回答by Nitin Nain
You are using /css/bootstrap-theme.css. Use /css/bootstrap.cssor /css/bootstrap.min.cssinstead. bootstrap-theme.css doesn't have "col- " properties.
您正在使用/css/bootstrap-theme.css. 使用/css/bootstrap.css或/css/bootstrap.min.css代替。bootstrap-theme.css 没有“col-”属性。
Also, instead of using just one class="col-md-1"(for medium sized viewport/screen) you might want to use something like class="col-xs-12 col-sm-6 col-md-3 col-lg-3"that makes your columns responsive to different screens. ('xs' for extra small screen, 'lg' for large screen etc. Play around with these numbers. Bootstrap uses a 12 columns grid layout, so use factors of 12 as the numbers.)
此外，class="col-md-1"您可能想要使用类似的东西，而不是只使用一个（对于中等大小的视口/屏幕）class="col-xs-12 col-sm-6 col-md-3 col-lg-3"，使您的列响应不同的屏幕。（'xs' 表示超小屏幕，'lg' 表示大屏幕等。使用这些数字。Bootstrap 使用 12 列网格布局，因此使用 12 的因子作为数字。）
回答by sir4ju1
If you are viewing it with small screen width then use following way:
如果您使用小屏幕宽度查看它，请使用以下方式：
<div class="row">
<div class="col-md-1 col-sm-1"><span class="fa fa-caret-down"></span></div>
<div class="col-md-1 col-sm-2 col-xs-2"><span id="cool-title">My Site</span></div>
<div class="col-md-1 col-sm-3 col-xs-4">
<input type="text" placeholder="Search" class="search-bar">
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<button class="btn btn-default"><i class="fa fa-search col-md-1"> button</i></button>
</div>
</div>
Experiment with changing col-md-#(column number) or others to achieve your desired result.
尝试更改col-md-#（列号）或其他以达到您想要的结果。
Liveweave: http://liveweave.com/9MGL33
活织：http: //liveweave.com/9MGL33
回答by pbrueske
Maybe your screen resolution is too small. If you don't want to add responsive behaviour, you should start with col-xs-*, so the columns will always be horizontal (or inline). Remember that bootstrap uses 12 columns by default, so maybe col-xs-1 will be a little to small.
可能你的屏幕分辨率太小了。如果您不想添加响应行为，您应该从 col-xs-* 开始，这样列将始终是水平的（或内联的）。请记住，引导程序默认使用 12 列，因此 col-xs-1 可能会有点小。
<div class="container">
<div class="row">
<div class="col-xs-1"><span class="fa fa-caret-down"></span></div>
<div class="col-xs-1"><span id="cool-title">My Site</span></div>
<div class="col-xs-1">
<input type="text" placeholder="Search" class="search-bar">
</div>
<div class="col-xs-1">
<button class="btn btn-default"><i class="fa fa-search col-md-1"></i></button>
</div>
</div>
</div>
