带有两个全宽块按钮的Bootstrap列

Question

我希望Bootstrap列在屏幕类型更改时很好地调整按钮大小.但是按钮最终没有空间和两条独立的线(在小屏幕上).

如何让它们调整为较小的按钮,而不是分成新的线？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Example!</div>
                <div class="panel-body">
                    <div class="form-group">
                        <div class="col-xs-3 col-xs-offset-4">
                            <a href="#" class="btn btn-success btn-block" role="button">Add Item</a>
                        </div>
                        <div class="col-xs-3">
                            <a href="#" class="btn btn-danger btn-block" role="button">Remove Item</a>
                        </div>
                    </div>
                </div>
           </div>
        </div>
    </div>
</div>

Answer 1

如果您想为小型设备和大型设备使用相同的样式,则可以省略md样式并使用sm.如果宽度变得非常小,则可以删除offset元素并在元素上使用增加的宽度而不是xs宽度.

要修复被剪切的按钮,请删除btn-block该类.

演示

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
    <div class="col-sm-3 col-sm-offset-3 col-xs-6">
        <a href="#" class="btn btn-success" role="button">Add Item</a>
    </div>
    <div class="col-sm-3 col-xs-6">
        <a href="#" class="btn btn-danger" role="button">Remove Item</a>
    </div>
</div>

作为旁注,如果您希望按钮在此居中,请使用offset3而不是4.