时间戳

首页 > 解决方案 > 使用引导程序具有相同高度的 Div

html - 使用引导程序具有相同高度的 Div

问题描述

我有 8 个 div 水平对齐的结构，我希望它们具有相同的高度。目前，它们具有不同的高度，具体取决于其中的文本内容。任何人都可以帮忙吗？我已经尝试了很多解决方法，但它仍然对我不起作用。我正在使用 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>

在此处输入图像描述

标签： htmlcsstwitter-bootstrap

解决方案

每行需要有 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/

推荐阅读