Question

这就是我想要的：

+-row3----------++-row9----------+    
|                | |         |  
|        | |
|                | |Image   
+----------------+ |            
+-row3----------+  |
|                | |
| Need content   | |
| bottom align   | |
|  here          | |
|                | |                |
+----------------+ +----------------+
-----------------------------------------------

我的HTML如下：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-12">
        <div class="col-md-3">
            <div class="row">
        bootstrap table css - html table
        bootstrap table css - html table
        </div>
            <div class="row">
        bootstrap table ----- Need this table to show at bottom align with same div as shown on beside column.
        </div>  
    </div>
    <div class="col-md-9">
        The image is shown here - vertically large height than the first column.

    </div>
</div>

根据草图，需要内容对齐底部。尝试过 - vertical-align：bottom但是没有对齐。

Answer 1

如果它有帮助，试试这个。展开代码段以全屏显示。您可以通过将height属性设置为div class="col-md-9"来获得图像的高度。

＆＃13;

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="row">
    <div class="col-md-12">
      <div class="col-md-3" style="">

        <div class="row">
          <div class="col-md-12" style="background-color: blue;">

            bootstrap table css - html table
          </div>
        </div>
        <div class="row">
          <div class="col-md-12" style="background-color: red;">

            bootstrap table css - html table
          </div>
        </div>
      </div>
      <div class="col-md-9" style="background-color: green; height:40px;">
        Image shown here - vertically large height then first column.

      </div>
    </div>
</body>

</html>

＆＃13;

Answer 2

或者，添加div高度样式，它会添加gape并接近底部。 <div style="height:200px;"></div>

由于

如何获得bootstrap第一列第二行内容与第二列底线对齐？

2 个答案: