无法在 Bootstrap 的流体容器内完全居中 3 列

Question

我试图在 流体容器 中以 偏移 1 将 3 列居中，但出于某种原因，所有 3列的左对齐比右对齐。

此外，当我调整窗口大小时，所有 3 列都会一直向左移动，而不是保持居中。

https://jsfiddle.net/DTcHh/16895/

我的问题是：

什么是使所有内容居中的最佳方式：图像、标题、文本和 Bootstrap 中的列？ 注意：无论屏幕宽度如何，我都希望所有项目居中。

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

请记住，我对引导程序还很陌生，但是按照教程，上面的代码是我能做的最好的。所以请务必解释我做错了什么。谢谢！

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

是否有需要指定最大宽度的原因？