Question

我试图居中3列，偏移量为1 ，每次点击流体容器，但由于某种原因所有3 colums比左边更右边。

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

我的问题是：

将所有内容集中在一起的最佳方式是：图像，标题，文字和 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; }

请记住，我对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列完全置于流体容器内

1 个答案: