Question

我开始使用Bootstrap 3并选择了12列网格。我希望我的内容在大屏幕上大7列。有没有办法在左边设置0.5屏幕外？

感谢您的帮助

Answer 1

您可以使用已证实的保证金来中心任何列大小：0 auto;技术，您只需要处理Bootstrap的网格系统添加的浮动。我建议定义一个自定义CSS类，如下所示：

.col-centered{
    float: none;
    margin: 0 auto;
}

现在，您可以将其添加到任何屏幕大小的任何列大小，并且它将与Bootstrap的响应式布局无缝协作：

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Answer 2

您可以使用col-lg-pull-x和col-lg-push-x。

对于半列，您可以尝试创建一个新类。假设您希望col-lg-7-5您可以将宽度设置为col-lg-7和col-lg-8的平均值。

Answer 3

如果你想坚持使用Bootstraps网格系统，你可以将你的七列包装在一个div中并使用“col-md-offset”类。例如：

<div class="container-fluid">
  <div class="row text-center">
    <h1>CENTERED TEXT</h1>
  </div>
  <div class="row">
    <div class="col-md-10 col-md-offset-3">
      <div class="col-md-1 text-center">
        <p>COLUMN ONE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN TWO</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN THREE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN FOUR</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN FIVE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN SIX</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN SEVEN</p>
      </div>
    </div>
  </div>  
</div>

垮台是因为你只能将列大小限制为10.或者，您可以添加一些内联样式来填充屏幕的整个宽度，如下所示：

  <div class="row text-center">
    <h1>CENTERED TEXT</h1>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN ONE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN TWO</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN THREE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN FOUR</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN FIVE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN SIX</p>
      </div>
      <div class="col-md-1 text-center" style="margin-left: 3%;">
        <p>COLUMN SEVEN</p>
      </div>
    </div>
  </div>

代码笔在这里：https://codepen.io/dylanprem/pen/BrzKxo?editors=1010

希望这有帮助！

在Bootstrap 3中居中7列布局？

3 个答案: