相同按钮组中的Bootstrap 4-4个按钮（2 x行）响应

Question

我将在引导程序4中定义一个按钮组，其中包含4个按钮，其中两个用于行。 （响应式）

Answer 1

.box {
  background-color: #3C8DBC;
  color: #fff;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="box col">Filtri</div>
    <div class="box col">Filtri</div>
    <div class="w-100"></div>
    <div class="box col">Filtri</div>
    <div class="box col">Filtri</div>
  </div>
</div>

在这里您可以看到更多信息：https://getbootstrap.com/docs/4.1/layout/grid/#equal-width

此外，您可以在Filtri之前插入iconfont以添加过滤器图标。例如：

<div class="box col"><span class="icon"></span>Filtri</div>

Answer 2

您可以尝试使用Grid System来遵循结构。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="form-row">
<div class="col">
  <button class="btn btn-primary btn-block" type="submit" >Filtri</button>
</div>
<div class="col">
  <button class="btn btn-primary btn-block" type="submit" >Filtri</button>
</div>
  </div>
  <div class="form-row mt-2">
<div class="col">
  <button class="btn btn-primary btn-block" type="submit" >Filtri</button>
</div>
<div class="col">
  <button class="btn btn-primary btn-block" type="submit" >Filtri</button>
</div>
  </div>
</div>

另一个示例，其中有Button group：

（在这里，您将不会在一行中的两个按钮之间获得空格。）

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="btn-group">
  <button class="btn btn-primary" type="submit" >Filtri</button>
  <button class="btn btn-primary" type="submit" >Filtri</button>
</div>
<div class="w-100 mb-3"></div>
<div class="btn-group">
  <button class="btn btn-primary" type="submit" >Filtri</button>
  <button class="btn btn-primary" type="submit" >Filtri</button>
</div>

Answer 3

<div class="container">
   <div class="row">
        <div class="col-md-6">
            <button class="btn btn-primary">Btn1</button>
        </div>
        <div class="col-md-6">
            <button class="btn btn-primary">Btn1</button>
        </div>
   </div>      <div class="row">
        <div class="col-md-6">
            <button class="btn btn-primary">Btn1</button>
        </div>
        <div class="col-md-6">
            <button class="btn btn-primary">Btn1</button>
        </div>
   </div>
</div>