Question

我使用bootstrap并想要找到三个div，如下所示。能否请您提供符合此要求的示例演示？如果有可能，最好使用bootstrap.css？提前致谢。

HTML

<!-- Navigation -->
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="http://usebootstrap.com/" class="navbar-brand">UseBootstrap</a>
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
    </div>
</div>

<!-- Page Content -->
<div class="container">

    <div class="row">
        <div class="col-md-6 portfolio-item">
            <div class="panel panel-primary" style="height:325px !important;">
                <div class="panel-heading">
                    <h3 class="panel-title" id="panel-title">AAAAAAAAAAAAAA<a href="#panel-title" class="anchorjs-link"><span class="anchorjs-icon"></span></a></h3>
                </div>
                <div>
                    Content AAAAAAAA
                </div>
            </div>
        </div>
        <div class="col-md-6 portfolio-item">
            <div class="panel panel-primary" style="height:325px !important;">
                <div class="panel-heading">
                    <h3 class="panel-title" id="panel-title">BBBBBBBBBBBBBBBB<a href="#panel-title" class="anchorjs-link"><span class="anchorjs-icon"></span></a></h3>
                </div>
                <div>
                    Content BBBBBBBBBBB
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 portfolio-item">
            <div class="panel panel-primary" style="height:325px !important;">
                <div class="panel-heading">
                    <h3 class="panel-title" id="panel-title">CCCCCCCCCCCCCCCCCCCC<a href="#panel-title" class="anchorjs-link"><span class="anchorjs-icon"></span></a></h3>
                </div>
                <div>
                    Content CCCCCCCCCCC
                </div>
            </div>
        </div>
        <div class="col-md-6 portfolio-item">
            <div class="panel panel-primary" style="height:325px !important;">
                <div class="panel-heading">
                    <h3 class="panel-title" id="panel-title">DDDDDDDDDDDDDDDDDDD<a href="#panel-title" class="anchorjs-link"><span class="anchorjs-icon"></span></a></h3>
                </div>
                <div>
                    Content DDDDDDDDDDD
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.container -->

<!-- Footer -->
<footer>

</footer>

Answer 1

尝试以下代码;

body {
  text-align: center;
}
#header,
#footer {
  border: 2px solid green;
  padding: 10px;
  color: green;
  font-size: 1.5em;
  margin: 10px auto;
}
#lhs {
  border: 2px solid red;
  height: 300px;
}
#rhs1,
#rhs2 {
  border: 2px solid blue;
  height: 140px;
  margin-bottom: 20px;
}
#rhs2 {
  margin-bottom: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<header>
      <div class="container" id="header">
        Header
      </div>
    </header>
    <div class="container">
      <div class="row">
        <div class="col-xs-6">
          <div id="lhs">
          left hand side
          </div>
        </div>
        <div class="col-xs-6">
          <div id="rhs1">
          Right hand side Up
          </div>
          <div id="rhs2">
          Right hand side Down
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="container" id="footer">
        Footer
      </div>
    </footer>

Answer 2

这取决于rowspan，至于display:table不支持rowspan属性，对我来说最好的解决方案是使用我们的老朋友table

这里看看

http://jsfiddle.net/myzL761q/

Answer 3

那样的东西？

<header class="row"></header>
<div class="row">
    <div class="col-lg-6"></div>
    <div class="col-lg-6">
        <div class="row">
            <div class="col-lg-12"></div>
            <div class="col-lg-12"></div>
        </div>
    </div>
</div>
<footer class="row"></footer>

实际上，http://getbootstrap.com/css/#grid这里写的是{{3}}，我建议你在下次提问之前先阅读它。

找到3个不同高度的html div，左边第一个，第二个和第三个在右边

3 个答案: