Question

我有这种水平排列的8格的结构，我希望它们具有相同的高度。当前，它们的高度取决于它们内部文本的内容。有人可以帮忙吗？我已经尝试了许多解决方法，但是它仍然对我不起作用。我正在使用bootstrap 3，所以flex不是解决方案：（

<div class="container" style="width:100%">
<div class="col-xs-6">
    <div class="row ">
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending DTO</div>
                </div>   
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Offer</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Budget Approval</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Technical Analysis</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-xs-6" style="height:100%">
    <div class="row ">
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Information</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Provisioning</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending in progress</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Provisioned</div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

每行都必须有12列，在这种情况下，您不应该将行彼此放置：

<div class="container" style="width:100%">
  <div class="row">

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>
  </div>

https://jsfiddle.net/he6na89r/

Answer 2

我只使用了引导程序3。此解决方案将有帮助！

<table id="emails-table" class="table table-hover" style="width: 100%; table-layout:fixed;" border="1">
  <thead class="thead-dark">
    <tr>
      <th colspan="3">To</th>
      <th colspan="1">Subject</th>
      <th colspan="4">Text</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <td colspan="3">To</td>
      <td colspan="1">Subject</td>
      <td colspan="4" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </td>
    </tr>
  </tbody>
</table>

具有自举程序的高度相同的Divs

2 个答案: