Question

我只想让我的列居中，但右边的空间太大，左边没有空格。

<div id="about" class="pad-section">
  <div class="container-fluid">
    <h1 style="text-align:center;">COMPANIES</h1>
    <div class="row-fluid" style="margin: 150px 0 100px 0;">

      <div class="col-lg-4">
        <div class="ih-item square effect6 from_top_and_bottom"><a href="#">
          <div class="img">Image with hovering effect</div>
          <div class="info">
            <h3>Title</h3>
            <p>Description</p>
          </div></a></div>
      </div>
      <div class="col-lg-4">
        <div class="ih-item square effect6 from_top_and_bottom"><a href="#">
          <div class="img">Image with hovering effect</div>
          <div class="info">
            <h3>Title</h3>
            <p>Description</p>
          </div></a></div>
      </div>
      <div class="col-lg-4">
        <div class="ih-item square effect6 from_top_and_bottom"><a href="#">
          <div class="img">Image with hovering effect</div>
          <div class="info">
            <h3>Title</h3>
            <p>Description</p>
          </div></a></div>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要从.container-fluid更改为.container和.row-fluid更改为.row

更新 OP的评论：

谢谢，但我的问题是列太靠近了即使我添加填充物，彼此也会相互接触？

你必须覆盖列的padding（不要使用!important）我必须使用因为代码片段不起作用，所以为{更多地设置值{ {1}}。

此外，它不是以较小的屏幕为中心

对齐中心使用引导类padding，

注意：此外我使用text-center但仅限于此处的演示，如果您只想使用一列，请使用col-xs-4或col-xs-12

col-sm-12

[class*="col-"] {
  padding: 0 50px !important
}

容器液体不居中

1 个答案: