将按钮分组为一行按钮,两行间隔

时间:2018-01-09 14:53:05

标签: css twitter-bootstrap

如何使用Bootstrap(特别是Bootstrap 4)对按钮进行分组,这样如果我有几行/多行按钮,其中一个按钮会同时占用两行?非常类似于计算器或键盘的数字键盘,其中Enter占用两行,如:

loadCars(377,643,628,614);  

我很确定有一种简单的方法可以做到,但我找不到它。

upd. After seeing the previous attempt of answer I better add a pic

1 个答案:

答案 0 :(得分:2)

试试这个:

<div class="row">
    <div class="col-9">
        <div class="row">
            <div class="col-4">
                 <button class="btn btn-primary btn-block">1</button>
            </div>
            <div class="col-4">
                 <button class="btn btn-primary btn-block">2</button>
            </div>
            <div class="col-4">
                 <button class="btn btn-primary btn-block">3</button>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-8">
                 <button class="btn btn-primary btn-block">0</button>
            </div>
            <div class="col-4">
                 <button class="btn btn-primary btn-block">.</button>
            </div>
        </div>
    </div>
    <div class="col-3">
        <button class="btn btn-primary btn-block">Enter</button>
    </div>
</div>

更新