在 Bootstrap 中无法将 3 列完全居中放置在流体容器内

Question

我正在尝试 居中 3 列，每个 偏移量为 1 流体容器，但由于某种原因，所有 3 列都比右对齐更左。

另外，当我调整 window 大小时，所有 3 列都向左移动，而不是保持居中。

我的问题是：

What is the best way to center everything: images, headings, text, and columns in Bootstrap? Note: I want to keep all items centered no matter the screen width.

HTML:

<div class="container-fluid conle">

        <row>


        <div class="col-md-3 col-md-offset-1 col-sm-8 col-sm-offset-1 workscol">

        <img src="http://jsfiddle.net/img/logo.png" height =100px; alt="">
        <h2>Everything</h2>

        <p class="text-muted textworks">Sign up and shut up or i will pick a 10 pound dumbell
        and makes you got fetch it. Thank you for your patience. Have a treat</p>     

        </div>



       <div class="col-md-3 col-md-offset-1 col-sm-8 col-sm-offset-1 workscol">

           <img src="http://jsfiddle.net/img/logo.png" height =100px; alt="">
        <h2>Control Nothing</h2>
        <p class="text-muted textworks">Sign up and shut up or i will pick a 10 pound dumbell
        and makes you got fetch it. Thank you for your patience. Have a treat</p>    


        </div>


         <div class="col-md-3 col-sm-8 col-sm-offset-1 workscol">

          <img src="http://jsfiddle.net/img/logo.png" height =100px; alt="">
        <h2>Go Away</h2>
        <p class="text-muted textworks">Sign up and shut up or i will pick a 10 pound dumbell
        and makes you got fetch it. Thank you for your patience. Have a treat</p>    

        </div>
</row>
            </div> <div class="clear"></div>

CSS:

.workscol {max-width:345px;  }

.textworks {font-size:20px; }

请记住，我是 bootstrap 的新手，但按照教程，上面的代码是我能做的最好的。所以请务必解释我做错了什么。谢谢！

Answer 1

这是你想要的吗？

http://codepen.io/anon/pen/pgqMWK

HTML:

<div class="container-fl

    uid conle">
      <row>

      <div class="col-md-3 col-md-offset-1 col-sm-8 col-sm-offset-1">
        <img src="http://jsfiddle.net/img/logo.png" height =100px; alt="">
        <h2>Everything</h2>
        <p class="text-muted textworks">Sign up and shut up or i will pick a 10 pound dumbell and make you go fetch it. Thank you for your patience. Have a treat,</p>     
      </div>

      <div class="col-md-3 col-md-offset-1 col-sm-8">
        <img src="http://jsfiddle.net/img/logo.png" height =100px; alt="">
        <h2>Everything</h2>
        <p class="text-muted textworks">Sign up and shut up or i will pick a 10 pound dumbell and make you go fetch it. Thank you for your patience. Have a treat,</p>     
      </div>

      <div class="col-md-3 col-md-offset-1 col-sm-8">
        <img src="http://jsfiddle.net/img/logo.png" height =100px; alt="">
        <h2>Everything</h2>
        <p class="text-muted textworks">Sign up and shut up or i will pick a 10 pound dumbell and make you go fetch it. Thank you for your patience. Have a treat,</p>     
      </div>
     </row>
    </div>

CSS:

.textworks {font-size:20px; }
.conle {text-align:center; }

是否需要指定最大宽度？

在 Bootstrap 中无法将 3 列完全居中放置在流体容器内

Unable to fully center 3 columns inside a fluid container in Bootstrap

css

containers

col

twitter-bootstrap

twitter-bootstrap-3