Question

如下图所示，我如何标记3个小容器，使其流畅且反应灵敏？

这是我的代码，

＆＃13;

<div class="container-fluid" style=";height: 350px;">
  <div class="row-fluid" style="height: 100%;">
    <div class="span9" style="height: 100%;">
      <div class="row-fluid"style="height: 50%">
        <div class="span12" style="height: 100%;">
          <div class="span4" style="background-color: violet;height: 100%">

          </div> 
          <div class="span4" style="background-color:green;height: 100%">

          </div> 
          <div class="span4" style="background-color: orange;height: 100%">

          </div> 
        </div>

      </div> 
      <div class="row-fluid" style="background-color: #ffff00;height: 48%;margin-top: 5px">

      </div> 

    </div>
    <div class="span3" style="background-color: pink;height: 100%;">

    </div>
  </div>
</div>

＆＃13;

预期产出：

enter image description here

Answer 1

我的踪迹如下。

注意：请不要使用内联CSS，因为这不是一个好习惯。将所有css转换为类并应用于HTML元素

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div style="height: 350px;" class="container-fluid">
      <div style="height: 100%;" class="row-fluid">
        <div style="height: 100%; float: left; width: 82%;" class="span9">
          <div style="height: 50%; width: 100%;" class="row-fluid">

            <div style="background-color: violet; height: 100%; float: left; margin: 5px; width: 31%;" class="span4">

            </div> 
            <div style="background-color: green; height: 100%; float: left; margin: 5px; width: 31%;" class="span4">

            </div>

            <div style="background-color: orange; height: 100%; float: left; margin: 5px; width: 31%;" class="span4">

            </div>
          </div> 

          <div style="background-color: rgb(255, 255, 0); float: left; height: 50%; margin: 5px; width: 95%;" class="row-fluid">

          </div> 

        </div>
        <div style="background-color: pink; width: 20%; float: left; margin: 5px 5px 5px -34px; height: 100%;" class="span3">

        </div>

      </div>
    </div>

  </body>
</html>

Answer 2

您可以使用此CSS

   [class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}

.span12 {
  width: 940px;
}

.span11 {
  width: 860px;
}

.span10 {
  width: 780px;
}

.span9 {
  width: 700px;
}

.span8 {
  width: 620px;
}

.span7 {
  width: 540px;
}

.span6 {
  width: 460px;
}

.span5 {
  width: 380px;
}

.span4 {
  width: 300px;
}

.span3 {
  width: 220px;
}

.span2 {
  width: 140px;
}

.span1 {
  width: 60px;
}

.offset12 {
  margin-left: 980px;
}

.offset11 {
  margin-left: 900px;
}

.offset10 {
  margin-left: 820px;
}

.offset9 {
  margin-left: 740px;
}

.offset8 {
  margin-left: 660px;
}

.offset7 {
  margin-left: 580px;
}

.offset6 {
  margin-left: 500px;
}

.offset5 {
  margin-left: 420px;
}

.offset4 {
  margin-left: 340px;
}

.offset3 {
  margin-left: 260px;
}

.offset2 {
  margin-left: 180px;
}

.offset1 {
  margin-left: 100px;
}

.row-fluid {
  width: 100%;
  *zoom: 1;
}

.row-fluid:before,
.row-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}

.row-fluid:after {
  clear: both;
}

.row-fluid [class*="span"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin-left: 2.127659574468085%;
  *margin-left: 2.074468085106383%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

.row-fluid .controls-row [class*="span"] + [class*="span"] {
  margin-left: 2.127659574468085%;
}

.row-fluid .span12 {
  width: 100%;
  *width: 99.94680851063829%;
}

.row-fluid .span11 {
  width: 91.48936170212765%;
  *width: 91.43617021276594%;
}

.row-fluid .span10 {
  width: 82.97872340425532%;
  *width: 82.92553191489361%;
}

.row-fluid .span9 {
  width: 74.46808510638297%;
  *width: 74.41489361702126%;
}

.row-fluid .span8 {
  width: 65.95744680851064%;
  *width: 65.90425531914893%;
}

.row-fluid .span7 {
  width: 57.44680851063829%;
  *width: 57.39361702127659%;
}

.row-fluid .span6 {
  width: 48.93617021276595%;
  *width: 48.88297872340425%;
}

.row-fluid .span5 {
  width: 40.42553191489362%;
  *width: 40.37234042553192%;
}

.row-fluid .span4 {
  width: 31.914893617021278%;
  *width: 31.861702127659576%;
}

.row-fluid .span3 {
  width: 23.404255319148934%;
  *width: 23.351063829787233%;
}

.row-fluid .span2 {
  width: 14.893617021276595%;
  *width: 14.840425531914894%;
}

.row-fluid .span1 {
  width: 6.382978723404255%;
  *width: 6.329787234042553%;
}

[class*="span"].hide,
.row-fluid [class*="span"].hide {
  display: none;
}

[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}

.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}

.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}

.container:after {
  clear: both;
}

.container-fluid {
  padding-right: 20px;
  padding-left: 20px;
  *zoom: 1;
}

.container-fluid:before,
.container-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}

.container-fluid:after {
  clear: both;
}

如何使bootstrap嵌套div响应和流畅

2 个答案: