Question

我试图修复bootstrap列的垂直位置但没有成功。

<div class="col-sm-9 col-xs-12 fixed">
  <div class="row pad-20">
    <div class="col-xs-6">
        <button type="button" value="0" class="btn {{color1}} btn-lg btn-block choice">{{choice1}}</button>
    </div>  
    <div class="col-xs-6">
        <button type="button" value="1" class="btn {{color2}} btn-lg btn-block choice">{{choice2}}</button>
    </div>
  </div>    
 </div>
</div>

固定的地方是：

.fixed{
 position: fixed;
 bottom: 5px; 
}

sm-9和xs-12的比例不受尊重...... 有什么帮助吗？

Answer 1

你展示的标记周围有<div class="container">吗？此外，在标记中显示还有一个额外的结束</div>标记。

似乎在我把这个JSFiddle放在一起工作：

https://jsfiddle.net/o540r7cf/

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-9 col-xs-12 fixed">
            <div class="row">
                <div class="col-md-6 col-xs-6">
                    <button type="button" value="0" class="btn btn-primary btn-lg btn-block"> Choice 1</button>
                </div>
                <div class="col-md-6 col-xs-6">
                    <button type="button" value="1" class="btn btn-primary btn-lg btn-block">Choice 2</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.fixed {
    position: fixed;
    bottom: 5px;
}

Bootstrap：响应列的固定垂直位置？

1 个答案: