0

我正在尝试将3 列居中，每个列中的偏移量为 1在一个流体容器中，但由于某种原因，所有 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; }

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

4

1 回答 1

2

这是你想要的吗？

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

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

于 2016-02-12T01:04:44.027 回答