html - 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>

这是 fiddle http://jsfiddle.net/52VtD/10168/

我尝试过的

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

.row{

 width: 100%;

} 
}

现在第二列在移动设备的第一列下面

Answer 1

如果您不希望出现“大差距”，请使用类似 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>