Question

我的引导网格有问题。

它应该如下所示：在两行中，在一行中包含五个元素

现在在桌面上它看起来像这样：

另一方面，在响应模式下，它应该重新排序图标。现在它的工作方式如下：但它应该是两个一个。谢谢！

我添加了一个带有我正在使用的'html'的代码片段。

.capabilities-container {
	width: 100%;
	min-height: 100px;
	margin-bottom: 30px;
	text-align: center;
}

.capabilities-container img {
	max-width: 70%;
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">
<div class="capabilities-container">
  <div class="row">
  
    <div class="col-xs-12">
      <h3 class="text-center">Capabilities</h3>
    </div>

    <div class="col-md-2 col-sm-3 col-xs-6 col-md-offset-1">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Strategic Planning</div>
    </div>
    
    <div class="col-md-2 col-sm-3 col-xs-6">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Branding</div>
    </div>
    
    <div class="col-md-2 col-sm-3 col-xs-6">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Traditional, Direct & Digital Marketing</div>
    </div>
    
    <div class="col-md-2 col-sm-3 col-xs-6">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Media</div>
    </div>
    
    <div class="col-md-2 col-sm-3 col-xs-6">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Social Media</div>
    </div>

    <div class="col-md-2 col-sm-3 col-xs-6 col-md-offset-1">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Public Relations</div>
    </div>
    
    <div class="col-md-2 col-sm-3 col-xs-6">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Event & Experiental Marketing</div>
    </div>
    
        <div class="col-md-2 col-sm-3 col-xs-6">
           <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
          <div class="helped-title">Research & Measurement</div>
        </div>
    
        <div class="col-md-2 col-sm-3 col-xs-6">
           <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304"  height="236"> 
          <div class="helped-title">Data & Analytics</div>
        </div>
    
         <div class="col-md-2 col-sm-3 col-xs-6">
           <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304"                  height="236"> 
          <div class="helped-title-engagement">Engagement Program </br> Development</div>
       </div>
       
  </div>
  </div>
</body>

</html>

Answer 1

使用带有col-md-2的5个div的2行，以及10个文本对齐中心

 <div class="container">
  <div class="row text-center">
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
  </div>
  <div class="row text-center">
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
  </div>
</div>

查看演示

https://jsfiddle.net/m33mygqq/

Answer 2

问题与bootstrap使用的float有关。如果你不打包row中的每一个新行，则在新行中断时，浮动不会被bootstrap清除。如果大卫的回答表明不可能将每一条新行连成一行，你可以尝试以下方法（即使使用大卫答案，如果可能的话，也是可行的）：

将CSS clear:both;放在每行的第一项上。为此，您可以使用.entry_5col:nth-child(5n) + .entry_2col等计数选择器。

以响应模式重新排序的Bootstrap网格项

2 个答案: