网格计算器 Bootstrap 或 Flex Box

Question

我想用 bootstap 或 flex-box 构建一个网格，它应该如下所示：

不幸的是，我对 bootstrap 网格的尝试没有达到预期效果。我希望数量 numbers(11, 2) 右对齐并具有相同的 div-box。在我的期望中，数字 2 的 div 应该与数字 11 的 div 具有相同的宽度，这意味着这些 div-boxes 的宽度应该基于更大的那个（ 11).给这两个 div 一个静态列宽度不是我想要的。

HTML:

<h6 class="py-2">my attempt</h6>

<div class="row text-right">
 <div class="col col-md-auto width-should-be-equal">11</div>
 <div class="col col-md-auto">*</div>
 <div class="col col-md-auto">50$</div>
 <div class="col col-md-auto text-center">=</div>
 <div class="col col-md-auto">550$</div>
</div>

<div class="row text-right">
 <div class="col col-md-auto width-should-be-equal"> 2</div>
 <div class="col col-md-auto">*</div>
 <div class="col col-md-auto">500$</div>
 <div class="col col-md-auto text-center">=</div>
 <div class="col col-md-auto">1000$</div>
</div>


<h6 class="py-2">not the goal</h6>

<div class="row text-right">
 <div class="col col-md-2 width-should-be-equal">11 </div>
 <div class="col col-md-auto">*</div>
 <div class="col col-md-auto">50$</div>
 <div class="col col-md-auto text-center">=</div>
 <div class="col col-md-auto">550$ </div>
</div>

<div class="row text-right">
 <div class="col col-md-2 width-should-be-equal">2</div>
 <div class="col col-md-auto">*</div>
 <div class="col col-md-auto">500$</div>
 <div class="col col-md-auto text-center">=</div>
 <div class="col col-md-auto">1000$</div>
</div>

CSS:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
 border: solid 1px #6c757d;
 padding: 10px;
}

.width-should-be-equal {
  border: 1px solid blue;
}

感谢您的帮助！

https://jsfiddle.net/6qojnz78/

Answer 1

因为没有针对“适合最宽宽度”的 flexbox（Bootstrap 网格）解决方案。

IMO，最接近的解决方法是使用 display:table-cell。您仍然可以使用网格 row/col 并仅在 md 和更大（d-md-table-row 和 d-md-table-cell）上使用 table-cell 覆盖...

<div class="container">
    <div class="row d-md-table-row text-right">
        <div class="col d-md-table-cell width-should-be-equal">11</div>
        <div class="col d-md-table-cell text-center">*</div>
        <div class="col d-md-table-cell">50$</div>
        <div class="col d-md-table-cell  text-center">=</div>
        <div class="col d-md-table-cell">550$</div>
    </div>
    <div class="row d-md-table-row text-right">
        <div class="col d-md-table-cell width-should-be-equal"> 2</div>
        <div class="col d-md-table-cell text-center">*</div>
        <div class="col d-md-table-cell">500$</div>
        <div class="col d-md-table-cell  text-center">=</div>
        <div class="col d-md-table-cell">1000$</div>
    </div>
</div>

https://codeply.com/p/qwyIJi2PDD

网格计算器 Bootstrap 或 Flex Box

Grid Calculator Bootstrap or Flex Box

twitter-bootstrap

bootstrap-4

flexbox

bootstrap-grid