如何像图像中一样排列 div？答案

【问题标题】：How can I arrange divs like in image?如何像图像中一样排列 div？
【发布时间】：2019-10-12 04:23:45
【问题描述】：

我想做这样的事情

我正在使用 bootstrap 4 并得到了这个

使用以下代码：

<div class="col-2 row align-items-center">
  <div class="col-6">
    {{cart.quantity}}
  </div>

  <div class="col-6 text-left">
    <div class="col-12">
      +
    </div>

    <div class="col-12">
      -
    </div>
  </div>

我做错了什么？

【问题讨论】：

有了这个特定的东西，你可能不想涉及 Bootstrap 的网格系统类。创建您自己的类，以便您可以指定对象的形状和行为，直至像素。
我也很确定 Bootstrap 有一些 Boostrapey 组件可以做到这一点，所以你不必创建自己的，比如这个 Bootstrap 4.2 自定义 Range 组件getbootstrap.com/docs/4.2/components/forms/#range

标签： css bootstrap-4

【解决方案1】：

您实际上需要使 div 更小或分配一个图标类。您的背景和半径分布在 div 的整个宽度上 <div class="col-12">+</div>

【讨论】：