Bootstrap 3 for mobile 中的全宽两列布局

Question

我想在移动布局中设置两栏

<div class="row">
    <div class="col-md-2">
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div>
    </div>
    <div class="col-md-10    well">Main content</div>
</div>

这里是fiddlehttp://jsfiddle.net/52VtD/10168/

我试过的

@media screen and (min-width: 768px) {

.row{

 width: 100%;

} 
}

现在第 2 列在移动设备中位于第 1 列之下

Answer 1

Try this
<div class="row">
    <div class="col-md-2 col-xs-2 col-sm-2">
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div>
    </div>
    <div class="col-md-10 col-xs-10 col-sm-10   well">Main content</div>
</div>

Answer 2

为不同尺寸添加类：

 <div class="row">
    <div class="col-md-2  col-sm-2 col-xs-2">
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div>
    </div>
    <div class="col-md-10 col-sm-10 col-xs-10    well">Main content</div>
</div>

Answer 3

如果你不想这样 'big gap' 使用 nav-pills justified

example

<div class="row">
<div class="col-xs-2">
    <ul class="nav nav-pills nav-justified">
        <li type="button" class="btn btn-default">1</li>
        <li type="button" class="btn btn-default">2</li>
        <li type="button" class="btn btn-default">3</li>
    </ul>
</div>
<div class="col-xs-10">
    <div class="well">Main content</div>
</div>

Answer 4

将第一列的类更改为 col-xs-2，将第二列的 col-xs-10 更改为适用于所有尺寸的屏幕。

您的原始代码不起作用的原因是因为指定 col-md-2 和 col-md-10 只为中型屏幕 (md) 和更大屏幕提供两列。移动设备已保留为小屏幕移动设备的 Bootstrap 默认值，即将列堆叠在彼此之上。 Bootstrap列类按从小到大的顺序工作，所以md只涵盖中大。

Bootstrap 3 for mobile 中的全宽两列布局

Full width two column layout in bootsrap 3 for mobile

html

css

twitter-bootstrap

twitter-bootstrap-3