Question

在这里张贴的总菜鸟，我对Boostrap的方式也不明智，所以请耐心等待。

我们的网站使用Bootstrap 3，并且我已被指示创建一个页面，该页面仅使用一个自定义CSS文件，我们可以将该文件与该页面打包以与其他公司共享以放置在他们的网站上。

我已将整个网站中可以找到的所有内容复制到自定义CSS文件中以进行col-md-＃样式，并且我没有更改任何边距，宽度等，但出于某种原因，当我使用col-md-2样式创建六列文本，第六列＆＃34;包装＆＃34;到新的一行。

如果我理解正确，我应该能够将六个col-md-2放到一行/一行上。

我希望我已经正确地将我的屏幕打印和代码插入到我的帖子中。

感谢您为初学者提供的任何帮助！

更新6/29/17：我相信我已经发现了这个问题。我没有为body和html标签包含一些Bootstrap CSS。一旦我包含该代码，一切都落到了位置。谢谢gianni和Thomas！

＆＃13;

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
}

@media (max-width: 992px) {
  .md-margin-bottom-10 {
    margin-bottom: 10px;
  }
  .md-margin-bottom-20 {
    margin-bottom: 20px;
  }
  .md-margin-bottom-30 {
    margin-bottom: 30px;
  }
  .md-margin-bottom-40 {
    margin-bottom: 40px;
  }
  .md-margin-bottom-50 {
    margin-bottom: 50px;
  }
  .md-margin-bottom-60 {
    margin-bottom: 60px;
  }
}

＆＃13;

<div class="container">
<div class="row">
  <div class="col-md-2 md-margin-bottom-40">
      text 1<br>
    text 2
  </div>
  <div class="col-md-2 md-margin-bottom-40">
      text 3<br>
    text 4
  </div>
  <div class="col-md-2 md-margin-bottom-40">
      text 5<br>
    text 6
  </div>
  <div class="col-md-2 md-margin-bottom-40">
      text 7<br>
    text 8
  </div>
  <div class="col-md-2 md-margin-bottom-40">
      text 9<br>
    text 10
  </div>
  <div class="col-md-2 md-margin-bottom-40">
      text 11<br>
    text 12
  </div>
</div>
</div>

＆＃13;

Answer 1

我的猜测是你有一些冲突的CSS ...对我来说，看起来你正在从bootstrap.css复制CSS，这不需要做。

下面是一个具有bootstrap 3设置的代码笔。我已将代码直接粘贴到其中，以便您可以看到它确实有效。

https://codepen.io/GuruTom/pen/GEyvrq

使用的代码：

<div class="container">
  <div class="row">
    <div class="col-md-2 md-margin-bottom-40">
      text 1<br>
      text 2
    </div>
    <div class="col-md-2 md-margin-bottom-40">
      text 3<br>
      text 4
    </div>
    <div class="col-md-2 md-margin-bottom-40">
      text 5<br>
      text 6
    </div>
    <div class="col-md-2 md-margin-bottom-40">
      text 7<br>
      text 8
    </div>
    <div class="col-md-2 md-margin-bottom-40">
      text 9<br>
      text 10
    </div>
    <div class="col-md-2 md-margin-bottom-40">
      text 11<br>
      text 12
    </div>
  </div>
</div>

Bootstrap col-md-2向下按第六列

1 个答案: