我已经为此纠缠了几天，无法使本节工作。我希望一个大的div元素在左侧跨越两行，而在右侧具有两个堆叠的div元素。
这是代码。
<!DOCTYPE html>
<html>
<head>
<title>Athenz -- DJ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="_/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="_/css/mystyles.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- NAVIGATION MENU BAR -->
<div class="jumbtron">
<section class="navbar navbar-fixed-top center" role="navigation">
<ul id="top-nav" class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="model.html">Model</a></li>
<li><a href="actress.html">Actress</a></li>
<li><a href="dj.html">DJ</a></li>
<li><a href="entreprenuer.html">Entreprenuer</a></li>
<li><a href="press.html">Press</a></li>
<li><a href="contact.html">Contact</a></li>
</ul><!-- nav -->
</section><!-- navbar -->
<div id="djbanner" class="col-lg-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src='images/dj/dj1.jpg' alt="DJ Photo 1">
</div>
<div class="item">
<img src='images/dj/dj2.jpg' alt="DJ Photo 2">
</div>
<div class="item">
<img src='images/dj/dj3.jpg' alt="DJ Photo 3">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
<div id="dj-body" class="container">
<div class="row">
<div class="col-lg-6">
<div class="big-box">image</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6"><div class="mini-box">1</div></div>
<div class="col-lg-6"><div class="mini-box">2</div></div>
<div class="col-lg-6"><div class="mini-box">3</div></div>
<div class="col-lg-6"><div class="mini-box">4</div></div>
</div>
</div>
</div>
</div> <!-- container -->
<section class="navbar navbar-fixed-bottom" role="navigation">
<div class="container">
<ul id="bottom-nav" class="nav navbar-nav">
<li><a href="privacypolicy.html">Energy Wellness</a></li>
<li><a href="http://rouxacademy.com">Bookings</a></li>
<li><a href="https://www.facebook.com/athenzmedia"><img src="images/social/facebook.png" /></a></li>
<li><a href="https://twitter.com/athenzmedia"><img src="images/social/twitter.png" /></a></li>
<li><a href="https://www.youtube.com/channel/UC8j0tdZ-4Cw9inEshI-RHiQ"><img src="images/social/youtube.png" /></a></li>
<li><a href="https://soundcloud.com/armylagos/pure-stimulation-april"><img src="images/social/soundcloud.png" /></a></li>
</ul><!-- nav -->
</div>
</section><!-- navbar -->
<script>
$('.carousel').carousel({
interval: 4000
})
</script>
<script src="_/js/bootstrap.js"></script>
<script src="_/js/myscript.js"></script>
</body>
</html>
多数民众赞成在主页。这是CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* ------------ Navigation Bar Section ------------ */
.navbar.center {
text-align: center;
margin: 0 auto;
}
.navbar {
background-color: rgba(0,0,0,0.5);
background: rgba(0,0,0,0.5);
border-color: rgba(0,0,0,0.5);
}
.navbar-nav li a {
color: white;
}
ul#top-nav.nav.navbar-nav li a {
font-family: 'Raleway', sans-serif;
margin-right: 50px;
}
ul#top-nav.nav.navbar-nav {
float: none;
display: inline-block;
}
/* ----------- Home Page Section -------------*/
.quarter {
width: 50%;
height: 99.9%;
float: left;
}
.contents {
height: 50%;
width: 100%;
}
#athenz-logo {
z-index: 1050;
position: absolute;
background-image: url('../../images/logo/athenz-logo.png');
background-size: cover;
background-color: white;
top: 50%;
left: 50%;
width: 360px;
height: 225px;
margin-left: -180px;
margin-top: -112.5px;
border-left: 4px solid #468AD4;
border-top: 4px solid #468AD4;
}
#athenz-logo::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 49.5%;
border-bottom: 4px solid #468AD4;
}
#athenz-logo::after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 49%;
width: 4px;
border-right: 4px solid #468AD4;
}
#home-top-left {
background-image: url('../../images/home/home_tl.jpg');
background-size: cover;
position: relative;
border-bottom: 2px solid;
border-bottom-color: #468AD4;
border-right: 2px solid;
border-right-color: #468AD4;
}
#home-top-right {
background-image: url('../../images/home/home_tr.jpg');
background-size: cover;
position: relative;
border-bottom: 4px solid;
border-bottom-color: #468AD4;
border-left: 2px solid;
border-left-color: #468AD4;
}
#home-bottom-left {
background-image: url('../../images/home/home_bl.jpg');
background-size: cover;
position: relative;
overflow: hidden;
border-top: 2px solid;
border-top-color: #468AD4;
border-right: 4px solid;
border-right-color: #468AD4;
}
#home-bottom-right {
z-index: 1051;
padding: 75px;
position: relative;
overflow: hidden;
}
/* ------------- DJ STYLING STARTS ------------- */
div#carousel-example-generic.carousel.slide {
height: 100%;
}
div#carousel-example-generic.carousel.slide div.carousel-inner div.item img {
width: 100%;
}
.big-box,
.mini-box {
background-color: #10BCFF;
color: white;
text-align: center;
margin: 2px;
font-size: 1.5em;
}
.big-box {
height: 120px;
}
.mini-box {
height: 60px;
}
/* --------- Footer Section -------- */
ul#bottom-nav.nav.navbar-nav {
float: right;
}
ul#bottom-nav.nav.navbar-nav li {
margin: 0;
}
section.navbar.navbar-fixed-bottom div.container {
margin-right: 0;
}
section.navbar.navbar-fixed-bottom {
height: 50px;
z-index: 1060;
}
ul#bottom-nav.nav.navbar-nav li {
margin: 0;
text-align: center;
font-size: 12px;
right: 0;
padding: 0;
}
ul#bottom-nav.nav.navbar-nav li a img {
width: 28px;
}
我很确定我关闭了所有内容，但无法在计算机上正常工作。尝试了显示，位置和其他几个选项，但似乎无济于事。多谢您的协助。
最佳答案
<div class="row">
<div class="col-md-6">Tall</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">Top</div>
</div>
<div class="row">
<div class="col-md-12">Bottom</div>
</div>
</div>
</div>
关于html - Bootstrap列嵌套不起作用。 1个Div左边2行，右边2个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31275650/