Bootstrap 3 - 将嵌套列高度与较长列对齐

时间：2016-08-16 18:43:59

标签： html css twitter-bootstrap twitter-bootstrap-3

我正在使用bootstrap 3设计网站，而且我在调整portlet时遇到了问题。这就是当浏览器完美定位时网站目前的样子：

I want

上面的图片是我希望它看起来的一个很好的例子。我希望Dates Portlet与Purchase Task Details portlet和Purchase Costs portlet的组合高度相匹配。理想情况下，它会扩展到购买成本portlet的底部。同样，我希望批准portlet与跟踪Portlet的高度和位置相匹配。

我尝试了很多解决方案，但似乎没有任何效果。相反，我通常会得到这样的东西：

I have

这是我使用的代码（请忽略需要修复）：

＆＃13;
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- BEGIN OUTTER COLUMN -->
<div class="col-md-9 sol-sm-9">
  <div class="row ">
    <!-- START PORTLET -->
    <div class="col-md-12 col-sm-12">
      <div class="portlet purple-seance box">
        <div class="portlet-title">
          <div class="caption">
            <i class="fa fa-cogs"></i>Purchase Task Details</div>
          <div class="actions">
            <a href="javascript:;" class="btn btn-default btn-sm">
              <i class="fa fa-pencil"></i> Edit</a>
          </div>
        </div>
        <div class="portlet-body">
          <div class="row static-info">
            <div class="col-md-3 name">Purchase Status:</div>
            <div class="col-md-3 value">
              <span class="label label-success"> !!! NEEDS FIXIN !!! </span>
            </div>
            <div class="col-md-3 name">Assigned To:</div>
            <div class="col-md-3 value">!!! NEEDS FIXIN !!!</div>
          </div>
          <div class="row static-info">
            <div class="col-md-3 name">Order Type:</div>
            <div class="col-md-3 value">!!! NEEDS FIXIN !!!</div>
            <div class="col-md-3 name">Order:</div>
            <div class="col-md-3 value">!!! NEEDS FIXIN !!!</div>
          </div>
          <div class="row static-info">
            <div class="col-md-3 name">Procurement Ticket</div>
            <div class="col-md-3 value">!!! NEEDS FIXIN !!!</div>
            <div class="col-md-3 name">Ready Id:</div>
            <div class="col-md-3 value">!!! NEEDS FIXIN !!!</div>
          </div>
          <div class="row static-info">
            <div class="col-md-3 name">Vender:</div>
            <div class="col-md-3 value">!!! NEEDS FIXIN !!!</div>
            <div class="col-md-3 name">Manufacturer:</div>
            <div class="col-md-3 value">!!! NEEDS FIXIN !!!</div>
          </div>
          <div class="row static-info">
            <div class="col-md-3 name">Location:</div>
            <div class="col-md-3 value">!!! NEEDS FIXIN !!!</div>
            <div class="col-md-3 name">PO Number:</div>
            <div class="col-md-3 value">!!! NEEDS FIXIN !!!</div>
          </div>
          <div class="row static-info">
            <div class="col-md-3 name">SAP Contract Number:</div>
            <div class="col-md-3 value">!!! NEEDS FIXIN !!!</div>
            <div class="col-md-3 name">SAP Contract Line Number:</div>
            <div class="col-md-3 value">!!! NEEDS FIXIN !!!</div>
          </div>
        </div>
      </div>
      <!-- END PORTLET -->
    </div>
    <!-- END ROW -->
  </div>
  <div class="row">
    <!-- BEGIN INNER COLUMN -->
    <div class="cold-md-9">
      <!-- START PORTLET -->
      <div class="col-md-6 col-sm-6">
        <div class="portlet blue-steel box">
          <div class="portlet-title">
            <div class="caption">
              <i class="fa fa-cogs"></i>Deal Structure</div>
            <div class="actions">
              <a href="javascript:;" class="btn btn-default btn-sm">
                <i class="fa fa-pencil"></i> Edit</a>
            </div>
          </div>
          <div class="portlet-body">
            <div class="row static-info">
              <div class="col-md-5 name">Deal NRR:</div>
              <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
            </div>
            <div class="row static-info">
              <div class="col-md-5 name">Deal MMR:</div>
              <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
            </div>
            <div class="row static-info">
              <div class="col-md-5 name">Deal Term:</div>
              <div class="col-md-7 value">!!! NEEDS FIXIN !!!
                <span class="label label-info label-sm"> ROI  </span>
              </div>
            </div>
            <div class="row static-info">
              <div class="col-md-5 name">Deal Total:</div>
              <div class="col-md-7 value">!!! NEEDS FIXIN !!!
                <span class="label label-info label-sm"> $ </span>
              </div>
            </div>
          </div>
        </div>
        <!-- END PORTLET-->
      </div>
      <!-- START PORTLET -->
      <div class="col-md-6 col-sm-6">
        <div class="portlet red-mint box">
          <div class="portlet-title">
            <div class="caption">
              <i class="fa fa-cogs"></i>Purchase Costs</div>
            <div class="actions">
              <a href="javascript:;" class="btn btn-default btn-sm">
                <i class="fa fa-pencil"></i> Edit</a>
            </div>
          </div>
          <div class="portlet-body">
            <div class="row static-info">
              <div class="col-md-5 name">PR NRC:</div>
              <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
            </div>
            <div class="row static-info">
              <div class="col-md-5 name">PR MRC:</div>
              <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
            </div>
            <div class="row static-info">
              <div class="col-md-5 name">Amount:</div>
              <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
            </div>
            <div class="row static-info">
              <div class="col-md-7">
                </br>
              </div>
            </div>
          </div>
        </div>
        <!-- END PORTLET -->
        <!-- END INNER COLUMN -->
      </div>
      <!-- END ROW -->
    </div>
    <!-- START PORTLET -->
    <div class="col-md-6 col-sm-6">
      <div class="portlet green-jungle box">
        <div class="portlet-title">
          <div class="caption">
            <i class="fa fa-cogs"></i>Justification</div>
          <div class="actions">
            <a href="javascript:;" class="btn btn-default btn-sm">
              <i class="fa fa-pencil"></i> Edit</a>
          </div>
        </div>
        <div class="portlet-body" style="display: block;">
          <div class="panel-group accordion" id="accordion1">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
								<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse_1" aria-expanded="false"> Rationale </a>
                				</h4>
              </div>
              <div id="collapse_1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                <div class="panel-body">
                  <p>Example information</p>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
								<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse_2" aria-expanded="false"> Notes </a>
                				</h4>
              </div>
              <div id="collapse_2" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                <div class="panel-body" style="height:200px; overflow-y:auto;">
                  <p>CSCC Quote #14182705</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- START PORTLET -->
    <div class="col-md-6 col-sm-6">
      <div class="portlet green-jungle box">
        <div class="portlet-title">
          <div class="caption">
            <i class="fa fa-cogs"></i>Tracking</div>
          <div class="actions">
            <a href="javascript:;" class="btn btn-default btn-sm">
              <i class="fa fa-pencil"></i> Edit</a>
          </div>
        </div>
        <div class="portlet-body" style="display: block;">
          <div class="panel-group accordion" id="accordion1">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
								<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse_3" aria-expanded="false"> FedEx </a>
                				</h4>
              </div>
              <div id="collapse_3" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                <div class="panel-body">
                  <div class="row static-info">
                    <div class="col-md-3 name">Tracking:</div>
                    <div class="col-md-6 value">1111-2222-3333-4444</div>
                  </div>
                  <div class="row static-info">
                    <div class="col-md-3 name">ETA:</div>
                    <div class="col-md-6 value">Aug, 8, 2016</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
								<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse_4" aria-expanded="false"> DHL </a>
                				</h4>
              </div>
              <div id="collapse_4" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                <div class="panel-body" style="height:200px; overflow-y:auto;">
                  <div class="panel-body">
                    <div class="row static-info">
                      <div class="col-md-3 name">Tracking:</div>
                      <div class="col-md-6 value">1111-2222-3333-4444</div>
                    </div>
                    <div class="row static-info">
                      <div class="col-md-3 name">ETA:</div>
                      <div class="col-md-6 value">Aug, 8, 2016</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- END OUTTER COLUMN -->
</div>
<!-- START PORTLET -->
<div class="col-md-3 col-sm-3">
  <div class="portlet purple-medium box">
    <div class="portlet-title">
      <div class="caption">
        <i class="fa fa-cogs"></i>Dates</div>
      <div class="actions">
        <a href="javascript:;" class="btn btn-default btn-sm">
          <i class="fa fa-pencil"></i> Edit</a>
      </div>
    </div>
    <div class="portlet-body">
      <div class="row static-info">
        <div class="col-md-5 name">Purchase Task Created:</div>
        <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
      </div>
      <div class="row static-info">
        <div class="col-md-5 name">Ticket Received:</div>
        <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
      </div>
      <div class="row static-info">
        <div class="col-md-5 name">Quote Received:</div>
        <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
      </div>
      <div class="row static-info">
        <div class="col-md-5 name">PO Issued:</div>
        <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
      </div>
      <div class="row static-info">
        <div class="col-md-5 name">Change Order Date:</div>
        <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
      </div>
      <div class="row static-info">
        <div class="col-md-5 name">Order Received Date:</div>
        <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
      </div>
      <div class="row static-info">
        <div class="col-md-5 name">Lasted Modified:</div>
        <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
      </div>
      <div class="row static-info">
        <div class="col-md-5 name">Last Modified By:</div>
        <div class="col-md-7 value">!!! NEEDS FIXIN !!!</div>
      </div>
    </div>
  </div>
  <!-- END PORTLET -->
</div>
<!-- START PORTLET -->
<div class="col-md-3 col-sm-3">
  <div class="portlet green-jungle box">
    <div class="portlet-title">
      <div class="caption">
        <i class="fa fa-cogs"></i>Approvals</div>
      <div class="actions">
        <a href="javascript:;" class="btn btn-default btn-sm">
          <i class="fa fa-pencil"></i> Edit</a>
      </div>
    </div>
    <div class="portlet-body">
      <div class="row static-info">
        <div class="col-md-4 name">Approved by:</div>
        <div class="col-md-4 value">!!! NEEDS FIXIN !!!</div>
        <div class="col-md-4 value">!!! NEEDS FIXIN !!!</div>
      </div>
      <div class="row static-info">
        <div class="col-md-4 name">Approved by:</div>
        <div class="col-md-4 value">!!! NEEDS FIXIN !!!</div>
        <div class="col-md-4 value">!!! NEEDS FIXIN !!!</div>
      </div>
    </div>
  </div>
  <!-- END PORTLET -->
</div>
<!-- END TAB -->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

我现在已经把我的大脑震撼了一段时间。我感谢任何人都能提供的帮助。谢谢！

0 个答案:

没有答案
相关问题
最新问题