Bootstrap 4 - 4 个按钮（2 x 行）在同一个按钮组响应答案

【问题标题】：Bootstrap 4 - 4 buttons (2 x row) in the same button group responsiveBootstrap 4 - 4 个按钮（2 x 行）在同一个按钮组响应
【发布时间】：2018-11-29 06:07:33
【问题描述】：

我想在 bootstrap 4 中定义一个按钮组，里面有 4 个按钮，两个按钮用于行。（响应式）

【问题讨论】：

请展示您的尝试。

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案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>

【讨论】：

【解决方案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：

（在这里，您不会在一行中的 2 个按钮之间留出空格。）

<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>

【讨论】：

【解决方案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>

【讨论】：