Question

我目前正在使用此代码的中间列作为我的内容。

    <div class="row ">

        <div class="col-md-3">
        </div>


        <div class="col-md-6">
            <h3>
                <a href="#">Title</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
        </div>


        <div class="col-md-3">
        </div>


    </div>

这两个<div class="col-md-3">元素只放在那里，因此<div class="col-md-6">的内容居中。还有另一种方法让我有一个居中的盒子而没有两个额外的空元素。我假设我可以使用行属性或其他方法。

赞赏一个小小的例子。感谢

Answer 1

另一种方法是使用偏移...

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-offset-3"></div>
        <div class="col-xs-3"></div>
    </div>
</div>

演示：http://codeply.com/go/HV3yrjxKtB

Answer 2

取自文档：将.row-center类添加到行中，将.col-center添加到列中。

<div class="container">
    <div class="row row-centered">
        <div class="col-xs-6 col-centered"></div>
        <div class="col-xs-6 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
    </div>
</div>

Bootstrap - 用于居中框

2 个答案: