容器流体未居中 [英] Container fluid not centered

问题描述

  
我只想让我的列居中，但右侧的空间太多，没有空间。 >< div id =aboutclass =pad-section> 
< div class =container-fluid> 
< h1 style =text-align：center;>公司< / h1> 
< div class =row-fluidstyle =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>带悬停效果的图片< / div> 
< div class =info> 
< h3>标题< / h3> 
< p>说明< / 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>带悬停效果的图片< / div> 
< div class =info> 
< h3>标题< / h3> 
< p>说明< / 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>带悬停效果的图片< / div> 
< div class =info> 
< h3>标题< / h3> 
< p>说明< / p> 
< / div>< / a>< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

您需要从 .container-fluid 至 .container 和 .row-fluid 至 .row

更新 OP的评论：

< blockquote>

谢谢，但是我的问题是，即使在添加填充时，列也相距太近
？

您必须为列重载 padding （不要使用！important ）我不得不使用，因为代码片段不起作用，请按照 padding 更多地设置值。 b
$ b

此外，它并不集中在更小的屏幕上

调整中心使用引导程序类文本中心，

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

< ; link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css =stylesheet/>< div class =pad-sectionid =约> < div class =container> < h1 class =text-center>公司< / h1> < div class =rowstyle =margin：150px 0 100px 0;> < div class =text-center col-xs-4 col-lg-4> < div class =ih-item square effect6 from_top_and_bottom> < a href =＃> < div class =img>带悬停效果的图片< / div> < div class =info> < H3>标题< / H3> < p为H.说明与LT; / p为H. < / DIV> < / A> < / DIV> < / DIV> < div class =text-center col-xs-4 col-lg-4> < div class =ih-item square effect6 from_top_and_bottom> < a href =＃> < div class =img>带悬停效果的图片< / div> < div class =info> < H3>标题< / H3> < p为H.说明与LT; / p为H. < / DIV> < / A> < / DIV> < / DIV> < div class =text-center col-xs-4 col-lg-4> < div class =ih-item square effect6 from_top_and_bottom> < a href =＃> < div class =img>带悬停效果的图片< / div> < div class =info> < H3>标题< / H3> < p为H.说明与LT; / p为H. < / DIV> < / A> < / DIV> < / DIV> < / DIV> < / div>< / div>

I just want my columns to be centered but there's just too much space on the right side no space on the left.

<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>

解决方案

you need to change from .container-fluid to .container and .row-fluid to .row

UPDATE OP's Comment:

Thank you but my problem with that is the columns are too close to each other even when I add paddings?

you have to override the padding for the columns (don't use !important) I had to use because the snippet wouldn't work, set the value as you like it more for the padding.

Also it's not centered on smaller screens

To align center use bootstrap class text-center,

Note: plus I used col-xs-4 but only for demo here, if you want to have one column only, use col-xs-12 or col-sm-12

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="pad-section" id="about">
  <div class="container">
    <h1 class="text-center">COMPANIES</h1>
    <div class="row" style="margin: 150px 0 100px 0;">
      <div class="text-center col-xs-4 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="text-center col-xs-4 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="text-center col-xs-4 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>

这篇关于容器流体未居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！