html - Bootstrap 4 - 4 个按钮(2 x 行)在同一按钮组响应

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

我想在 bootstrap 4 中定义一个按钮组,里面有 4 个按钮,两个按钮用于一行。 (响应)

enter image description here

最佳答案

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

关于html - Bootstrap 4 - 4 个按钮(2 x 行)在同一按钮组响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50942597/

相关文章:

JavaScript/HTML : How to display user input into html body?

javascript - 如何在 Bootstrap 中构建交互式决策树

javascript - 响应式 Bootstrap

css - Jasny Bootstrap 在带有粘性页脚的移动屏幕上关闭 Canvas 导航

javascript - 如果 div 与另一个 div 重叠,如何隐藏它

html - 如何从浏览器中心添加纹理背景?

php - ics iCal 描述最大长度

html - 具有自动播放和覆盖文本的纯 CSS 3 图像 slider

css - 有什么有效的方法可以在 Firefox 中显示虚拟滚动条吗?

html - 使 Bootstrap 3 nav pills 占据网格中定义的空间