我刚把Bootstrap放到我的网站上，我一直在测试它。我一直在尝试使用网格系统，我遇到了一个小问题。所以在我的网站上我有一个标题，看起来像这样的“按钮1-6 |标识|登录”。现在，当我的网站缩小到767像素和更小的尺寸时，它仍然显示如上，但它们每个都有自己的行。所以看起来像这样的“按钮1-6（顶行）|徽标（第二行）|登录（第三行）”。现在，每当我尝试推动和拉动时，它仍然无法修复它。最终我想在767像素以下的屏幕上显示如此“Logo（顶行）|按钮1-6（第二行）|登录（第三行）”。这是我的HTML文件：
<div id="wrapper" class="container">
<div id="header" class="row">
<div id="headerleftside" class="col-lg-4 col-md-4 col-sm-4">
<div class="row">
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 1 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 2 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 3 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 4 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 5 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 6 </h1>
</div>
</a>
</div>
</div>
<div id="headertitle" class="col-lg-4 col-md-4 col-sm-4">
</div>
<div id="headerrightside" class="col-lg-4 col-md-4 col-sm-4">
<form action="action.php" method="post">
<button id="headersubmit" input type="submit"> Login </button>
<p class="logininputboxs"> <input type="text" name="username" placeholder="Userame" required/> </p>
<p class="logininputboxs"> <input type="password" name="password" placeholder="Password" required/> </p>
</form>
</div>
</div>
</div>
另请注意，上面的代码没有，和其他标签，因为这个文件被用作PHP的include（）。然后CSS文件如下：
/*
Used Colors:
• Black - Black
• Orange - Orange
• Light Blue - #4DB8FF
• Normal Blue - #296ACC
• Normal Blue (Darker) - #2156A6
• Gray - #292D30
*/
/*-------------------------------------------------------*/
#wrapper {
width: 100%;
height: 750px;
position: absolute;
}
/*-------------------------------------------------------*/
#header {
height: 15%;
background-color: #292D30;
position: static;
border-bottom: 5px solid #296ACC;
z-index: 5;
}
/*-------------------------------------------------------*/
#headerleftside {
background-color: #292D30;
}
.headerbuttons {
background-color: black;
font-size: 65%;
text-align: center;
margin-left: auto;
margin-right: auto;
line-height: 0%;
font-color: #4DB8FF; /*The color is defined in the <head>, as well as the hover.*/
border: 1px solid white;
border-radius: 5px;
}
/*-------------------------------------------------------*/
#headertitle {
height: 120%;
background-color: black;
border-bottom: 5px solid #2156A6;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
z-index: 10;
background: black url("http://localhost/postin'/title.png") no-repeat center center;
}
#headertitle:hover {
box-shadow: 0px 0px 5px 5px #2156A6;
z-index: 10;
background: black url("http://localhost/postin'/title_with_logo.png") no-repeat center center;
}
/*-------------------------------------------------------*/
#headerrightside {
background-color: #292D30;
}
.logininputboxs {
margin-left: 5%;
margin-top: 0%
}
input[type=text] {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid #4DB8FF;
border-radius: 3px;
}
input[type=password] {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid #4DB8FF;
border-radius: 3px;
}
.input_error_required {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid red;
border-radius: 3px;
}
.input_error_unique {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid red;
border-radius: 3px;
}
#headersubmit {
width: 15%;
height: 10%;
font-size: 100%;
border: 1px solid white;
border-radius: 3px;
text-align: center;
color: #4DB8FF;
background-color: black;
margin-left: 45%;
}
/*-------------------------------------------------------*/
#sidebar {
height: 84%;
width: 20%;
background-color: red;
position: static;
z-index: 1;
}
.sidebarbuttons {
width: 80%;
height: 12%;
margin-left: auto;
margin-right: auto;
background-color: white;
border-radius: 5px;
position: relative;
text-align: center;
font-size: 80%;
line-height: 500%;
top: 5%;
}
/*-------------------------------------------------------*/
a, u {
text-decoration: none; !important
}
最后，实际文件也由PHP下面的Include（）完成：
<html lang="en-US">
<link rel="icon" type="image/png" href="http://localhost/postin'/favicon.ico?v=2">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.1-dist/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
<!--
body {
margin: 0px;
}
-->
</style>
<style type="text/css">
a:link {color: #4DB8FF;} /* unvisited link */
a:visited {color: #4DB8FF;} /* visited link */
a:hover {color: orange;} /* mouse over link */
a:active {color: orange;} /* selected link */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
答案 0 :(得分：1)
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-push-4">
LOGO
</div><!-- /.col-sm-4 -->
<div class="col-sm-4 col-sm-pull-4">
BUTTONS
</div><!-- /.col-sm-4 -->
<div class="col-sm-4">
OTHER STUFF
</div><!-- /.col-sm-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
.col-sm-4与.col-md-4和.col-lg-4相同。它是父母的33.3333％。从.col-sm-最小宽度（默认为768px）到任何时候，这将是大小。因此，您不需要使用.col-md-4或.col-lg-4，这是多余的。