Rozmieszczenie kolumn w Gridzie

pytanie zadane 12 kwietnia 2018 w HTML i CSS przez barteku12 Obywatel (1,340 p.)
edycja 12 kwietnia 2018 przez barteku12

Witam, mam zrobić takie menu jak na obrazku 1, a wyszło mi to zielone menu z przerwami, jak widać na obrazku drugim. Co zrobiłem tu źle ?

Oto kod z html i css.

<!DOCTYPE html>
<html lang="pl">
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
<!-- opcjonalnie -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/bootstrap.min.js"></script>
<!-- Pluginy Bootstrap wymagają dołączenia biblioteki jQuery-->
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
 <div class="a">
   <h1>Nagłówek - span 12</h1>  
 </div>   
</div>    
</div>  
<div class="row">
    <div class="col-md-4">
  <div class="b"><h1>Sidebar - span 4 </h1></div>      
    </div>
      <div class="col-md-6">
      <div class="b">
<h1> Content - span 6 </h1>  </div>    </div>
      <div class="col-md-2">
  <div class="c"><h1>Aside - span 2</h1> </div>      
    </div>
   
</div>    
   <div class="row">
<div class="col-md-12">
 <div class="a">
   <h1>Stopka - span 12</h1>  
 </div>   
</div>  
</div>
    </div>
</body>

</html>

.container
{
    margin-left: auto;
    margin-right: auto;
}
.a
{
  background-color: #66CCFF; 
   height: 80px;
    text-align: center;
    padding: 10px;
}
.b
{  border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: solid black 3px;
    text-align: center;
background-color: #33CC00;
 height: 180px; 
   
}
.c
{
   border-bottom: 3px solid black;
     border-top: 3px solid black;
    text-align: center;
background-color: #33CC00; 
     height: 180px;
   
}

1 odpowiedź

odpowiedź 12 kwietnia 2018 przez Neronys Bywalec (2,090 p.)

Źle zbudowałeś strukturę Bootstrap.

Poprawnie powinno być tak:

<body>

    <!-- Container -->
    <div class="container col-md-12">
   
        <!-- Nagłówek -->
    <div class="container">
        <div class="row">
            <div class="col-md-12 a">
                <h1>Nagłówek - span 12</h1>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="container">
        <div class="row">
            <div class="col-md-4  b">
                <h1>Sidebar - span 4 </h1>
            </div>
            <div class="col-md-6  b">
                <h1> Content - span 6 </h1>
            </div>
            <div class="col-md-2 c">
                <h1>Aside - span 2</h1>
            </div>
        </div>
    </div>

    <!-- STOPKA -->
    <div class="container">
        <div class="row">
            <div class="col-md-12 a">
                <h1>Stopka - span 12</h1>
            </div>
        </div>
    </div>

    <!-- END CONTAINER -->
</div>
</body>