Question

我在我的移动项目中使用bootstrap 3。我正在设计标题。像

Block1                        Block2                          Block3

我希望块1始终在所有屏幕尺寸上保持对齐。类似地，block2和block3的位置需要处于相同的位置。

我不想折叠我的标题。

像http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_header

这样的标题栏

在Bootstrap3中

更新

                <div class="row">
                    <div class="col-xs-4">
                        <input type="checkbox" name= "my-checkbox" style="width:100%" checked>
                    </div>
                    <div class="col-xs-4">
                        <h4 class="ag-top-bar-text rm-dots" style="padding:7px">Header Text</h4>
                    </div>
                    <div class="col-xs-4 pull-right">
                        <input type="checkbox" name= "my-checkbox" style="width:100%" checked>
                    </div>
                </div>
            </div>

        </div>
    </nav>

Answer 1

试试这个，

HTML

<nav class="navbar navbar-default">
    <div class="navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="pull-left"><a href="#">Block 1</a></li>
            <li><a href="#">Block 2</a></li>
            <li class="pull-right"><a href="#">Block 3</a></li>
        </ul>
    </div>
</nav>

添加一些 CSS

.navbar-nav {
    width: 100%;
    text-align: center;
}
.navbar-nav > li {
    float: none;
    display: inline-block;
}

Demo

Answer 2

如果您使用12格网列，您应该可以执行以下操作：

<div class="row">
    <div class="col-xs-4">
        Block 1
    </div>
    <div class="col-xs-4">
        Block 2
    </div>
    <div class="col-xs-4">
        Block 3
    </div>    
</div>

Bootstrap Center Left Right Div在移动设备上中断

2 个答案: