Question

使用引导程序对嵌套div进行响应式布局这是我的HTML代码

  <div class="container-fluid" style="height: 350px;">
        <div class="row-fluid clearfix" style="height: 100%">
            <div class="col-md-9 column" style="height: 100%;">
                <div class="row clearfix" style="height: 50%;">
                    <div class="col-md-4 column" style="height: 100%;background-color: red">
                    </div>
                    <div class="col-md-4 column" style="height: 100%;background-color: green">
                    </div>
                    <div class="col-md-4 column" style="height: 100%;background-color: blue">
                    </div>
                </div>
                <div class="row clearfix" style="height: 50%;">
                    <div class="col-md-12 column" style="height: 100%;background-color: pink">
                    </div>
                </div>
            </div>
            <div class="col-md-3 column" style="height: 100%;background-color: yellow">
            </div>
        </div>
    </div>

输出：

Responsive layout

同时增加浏览器屏幕宽度

增加后的输出

after increasing browser size

这里缺少绿色和蓝色的div

我的预期输出：

Expected Output

请帮帮我..

Answer 1

您还需要为移动视图定义类，否则元素可以相互重叠。例如：

col-xs-12 col-md-4 column

请参阅bootply

Answer 2

现在正在使用，从行中删除clearfix类。这是代码

   <div class="container-fluid" style="height: 350px;">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row-fluid clearfix">
    <div class="col-md-9 column">
        <div class="row">
            <div class="col-md-4 column" style="height: 150px;background-color: red">
            </div>
            <div class="col-md-4 column" style="height: 150px; background-color: green">
            </div>
            <div class="col-md-4 column" style="height: 150px; background-color: blue">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 column" style="height: 150px; background-color: pink">
            </div>
        </div>
    </div>
    <div class="col-md-3 column" style="background-color: yellow; height: 300px">
    </div>
</div>
</div>

Answer 3

Dileep Kumar 您好，我将您的大部分代码都划分为可能只需要的内容。
看看这是否适合你。
此代码将粉红色块与其他代码嵌套。

以下是大视图 Fiddle 。更容易调整大小。

enter image description here

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.space {
  margin-top: 5%;
  margin-bottom: 5%;  
}    
    
.block-a {
  height: 350px;  
}
.block-b {
  height: 175px; 
}    
.block-red {
  height: 175px;
  background-color:#ff1000;  
}
.block-darkgreen {
  height: 175px;   
  background-color: green;  
}
.block-blue {
  height: 175px;   
  background-color: blue;  
}
.block-pink {
  height: 175px;   
  background-color: pink;  
}
.block-darkyellow {
  height: 350px;   
  background-color: gold;
}     
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container col-lg-12 space"></div>
    
<div class="container-fluid">
    <div class="row-fluid col-md-9 block-a">
        <div class="col-xs-12 col-sm-12 col-md-4 block-red"></div>
        <div class="col-xs-12 col-sm-12 col-md-4 block-darkgreen"></div>
        <div class="col-xs-12 col-sm-12 col-md-4 block-blue"></div>
        <div class="col-xs-12 col-sm-12 col-md-12 block-pink"></div>
    </div>
    <div class="row-fluid col-md-3 block-a">
        <div class="col-xs-12 col-sm-12 col-md-12 block-darkyellow"></div>
    </div>
</div>    
    
  
    
    <!-- Bootstrap core JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
</body>
</html>

＆＃13;

Answer 4

当然，将显示红色的一个，因为您已将父div的高度指定为50%，并将所有三个高度为100%的子项指定为红色div，即第一个，将占据所有的高度。一个解决方案是在达到断点时在三个div上指定33.33%的高度，如：

@media(max-width: 767px) {
  .col-md-9 .col-md-4 {
    height: 33.33%;
  }
}

在执行此操作之前，我会为div添加一些更具体的类。

使用引导程序的嵌套div的响应式布局

4 个答案: