帶有兩個全寬塊按鈕的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> 

作為旁注，如果您希望按鈕在此居中，請使用offset 3而不是4。

Answer 2

如果我很清楚，那么請嘗試我的更新代碼。

 <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 text-center"> <a href="#" class="btn btn-success" role="button">Add Item</a> </div> <div class="col-sm-3 col-xs-6 text-center"> <a href="#" class="btn btn-danger" role="button">Remove Item</a> </div> </div> 

Answer 3

您可以使用col-xs-3而不是col-md-3和col-xs-offset-4而不是col-md-offset-4

Answer 4

請記住，引導網格行是12列，因此您使用它的偏移量或列數應該最多為12並且針對小型屏幕設備，例如移動設備使用col-xs-* 。 其他一切都很好。

<div class="form-group">
    <div class="col-xs-3 col-xs-offset-6">
        <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>