Question

我一直在搞乱这几天，无法让这部分工作。我希望一个大的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;

}

我很确定我关闭了所有内容，但我无法让它在我的计算机上运行。尝试显示，位置和其他几个选项，但似乎没有任何工作。谢谢你的帮助。

Answer 1

<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>

Bootstrap列嵌套不起作用。 1 Div横跨2行向左，2行向右堆叠

1 个答案: