html - 如何使 Bootstrap 进度条在 <td> 之间跨越整个宽度？

Question

我们如何让 Bootstrap 进度条横跨两个徽章之间的整个宽度？

我试过了，但没有解决问题:

.progress {
margin-bottom: 0px;
width: 70%;
}

索引:

  <tr>
    <td>
      <button class="btn btn-primary" type="button">
      Level <span class="badge"><%= challenged.current_level %></span>
      </button>
    </td>
    <td>
      <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="10" style="width: 60%;">
      <%= challenged.current_level %>
      </div>
      </div>
    </td>
    <td>
      <button class="btn btn-primary" type="button">
      Strike <span class="badge"><%= [params[:missed]].flatten.length %></span>
      </button>
    </td>
  </tr>

编辑

完整索引

 <table>
    <% @habits.each do |challenged| %>
    <tbody>
          <tr>
              <td>
                  Level <span class="badge"><%= challenged.current_level %></span>
              </td>
              <td>
                  <div class="progress">
                      <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="10" style="width: 60%;">
                          <%= challenged.current_level %>
                      </div>
                  </div>
              </td>
              <td>
                  Strike <span class="badge"><%= [params[:missed]].flatten.length %></span>
              </td>
          </tr>
        <tr>
          <td><span class="label label-primary">AFTER I</span> <%= challenged.trigger %>,
          <span class="label label-primary">I WILL</span>
            <%= raw challenged.tag_list.map { |t| link_to t.titleize, tag_path(t), class: 'label label-info' }.join(' ') %>
          <span class="label label-primary">UNTIL</span> <%= challenged.target %>
          <span class="label label-primary">SO I CAN</span> <%= challenged.reward %>
            <span class="label label-primary"><%= challenged.committed.map { |d| d.titleize[0,3] }.join ', ' %></span></td>
        </tr>
    </tbody>
  <% end %>
  </table>

我尝试了诸如删除 td、添加 td、更改 div 之类的操作，因此我认为我将其缩小到必须覆盖进度条默认代码中的某些内容。

感谢您的宝贵时间!

Answer 1

尝试将 width: 100%; 添加到中间单元格:

HTML:

<table class="table">
    <tbody>
        <tr>
            <td>Level <span class="badge">1</span></td>
            <td class="stretch vam">
                <div class="progress m0">
                    <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="10" style="width: 60%;">text</div>
                </div>
            </td>
            <td>Strike <span class="badge">1</span></td>
        </tr>
        <tr>
            <td colspan="3">
                <span class="label label-primary">Label</span> more text
                <span class="label label-primary">Label</span> more text
                <span class="label label-primary">Label</span> more text
                <span class="label label-primary">Label</span> more text
                <span class="label label-primary">Label</span> more text
            </td>
        </tr>
    </tbody>
</table>

CSS:

td.stretch {
    width: 100%;
}

JSFiddle demo: