Question

Bootstrap似乎跳过了11个cols，我在调整所有内容方面遇到了麻烦。

Answer 1

您需要在col-md-课程中拥有divs个已命名的课程row。

例如 -

<div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-5"></div>
      <div class="col-md-2"></div>
      <div class="col-md-1"></div>
</div>

使用 more details

的链接

Answer 2

如果您将代码放在此处，我们会更好地了解您的问题。

话虽如此，我给你留下一些一般的提示：

某些Bootstrap网格系统规则：


行必须放在.container（固定宽度）或.container-fluid（全宽）内，以便正确对齐和填充

使用行创建水平的列组

内容应放在列中，只有列可能是行的直接子项

.row和.col-sm-4等预定义类可用于快速制作网格布局

列通过填充创建装订线（列内容之间的间隙）。该填充通过
在第一列和最后一列的行中偏移   .rows
的负利润率
通过指定要跨越的12个可用列的数量来创建网格列。例如，三个相等的列将使用
  三.col-sm-4

此处包含完整信息：http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

这里有一个片段示例来说明：

＆＃13;

.show-grid [class^="col-"]{
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #AAA;
  background-color: #EEE;
  background-color: rgba(200, 200, 200, 0.3);
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row show-grid">
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
</div>
<div class="row show-grid">
  <div class="col-xs-8">.col-8</div>
  <div class="col-xs-4">.col-4</div>
</div>
<div class="row show-grid">
  <div class="col-xs-4">.col-4</div>
  <div class="col-xs-4">.col-4</div>
  <div class="col-xs-4">.col-4</div>
</div>
<div class="row show-grid">
  <div class="col-xs-6">.col-6</div>
  <div class="col-xs-6">.col-6</div>
</div>

＆＃13;

为什么bootstrap跳过线？

2 个答案: