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>

这是小提琴http://jsfiddle.net/52VtD/10168/

我尝试了什么

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

.row{

 width: 100%;

} 
}

现在第二列位于移动

的第一列

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

如果你不希望那个“大差距”使用像nav-pills那样合理的话

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中的全宽两列布局

4 个答案: