对齐引导程序中的列4

Question

我有以下引导程序布局（with a bootply）。

<div class="container">
    <div class="row">
      <item class="col"><div class="card-block"><p>32</p></div></item>
      <item class="col"><div class="card-block"><p>64</p></div></item>
      <item class="col"><div class="card-block"><p>128</p></div></item>
      <item class="col"><div class="card-block"><p>256</p></div></item>
      <item class="col"><div class="card-block"><p>512</p></div></item>
    </div>
    <div class="row">
      <item class="col"><div class="card-block"><p>32</p></div></item>
      <item class="col-9"><div class="card-block"><p>32</p></div></item>
    </div>
</div>

它产生以下内容：

是否可以重新安排html来制作它？

并保持响应（最后一个绿色32可以占用尽可能多的空间，直到它必须包装 - 这是默认行为）？

Answer 1

<div class="container">
<div class="row">
  <item class="col"><div class="card-block"><p>32</p></div></item>
  <item class="col"><div class="card-block"><p>64</p></div></item>
  <item class="col"><div class="card-block"><p>128</p></div></item>
  <item class="col"><div class="card-block"><p>256</p></div></item>
  <item class="col"><div class="card-block"><p>512</p></div></item>
</div>
<div class="row">
  <item class="col" style="max-width: 20%"><div class="card-block"><p>32</p></div></item>
  <item class="col"><div class="card-block"><p>32</p></div></item>
</div>

这似乎可以满足您的需求！

Answer 2

这会有足够的反应吗？

<div class="container">
    <div class="row">
      <item class="col-md-2 col-sm-12"><div class="card-block"><p>32</p></div></item>
      <item class="col-md-2 col-sm-12"><div class="card-block"><p>64</p></div></item>
      <item class="col-md-2 col-sm-12"><div class="card-block"><p>128</p></div></item>
      <item class="col-md-2 col-sm-12"><div class="card-block"><p>256</p></div></item>
      <item class="col-md-2 col-sm-12"><div class="card-block"><p>512</p></div></item>
    </div>
    <div class="row">
      <item class="col-md-2 col-sm-12"><div class="card-block"><p>32</p></div></item>
      <item class="col-md-8 col-sm-12"><div class="card-block"><p>32</p></div></item>
  </div>
</div>