如何在bootstrap 3中居中列内容?

时间:2014-01-21 13:58:47

标签: twitter-bootstrap twitter-bootstrap-3

我希望每列的内容都居中,但由于某些原因,所有列都相互接触。

我尝试使用margin: 0 auto;

这是我的代码:

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-3 col-lg-6 well ">
            <img src="http://placehold.it/250x150" class="img-responsive pull-left img-thumbnail" style="margin:5px 10px 0 0" alt="">
            <h3><a href = "#">Title</a></h3>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
                <a href="#" class="btn btn-success btn-sm pull-right">Read More</a>
            </p>
        </div>

        <div class="col-sm-6 col-md-3 col-lg-6 well ">
            <img src="http://placehold.it/250x150" class="img-responsive pull-left img-thumbnail" style="margin:5px 10px 0 0;" alt="">
            <h3><a href = "#">Title</a></h3>    
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                <a href="#" class="btn btn-success btn-sm pull-right">Read More</a>
            </p>
        </div>

        <div class="col-sm-6 col-md-3 col-lg-6 well ">
            <img src="http://placehold.it/250x150" class="img-responsive pull-left img-thumbnail" style="margin:5px 10px 0 0" alt="">
            <h3><a href = "#">Title</a></h3>    
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                <a href="#" class="btn btn-success btn-sm pull-right">Read More</a>
            </p>
        </div>

        <div class="col-sm-6 col-md-3 col-lg-6 well ">
            <img src="http://placehold.it/250x150" class="img-responsive pull-left img-thumbnail" style="margin:5px 10px 0 0;" alt="">
            <h3><a href = "#">Title</a></h3>    
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
                <a href="#" class="btn btn-success btn-sm pull-right">Read More</a>
            </p>
        </div>
    </div><!-- end row-->
</div><!-- end container-->

0 个答案:

没有答案