• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Rozmieszczenie kolumn w Gridzie

0 głosów
138 wizyt
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 ? 

1: 

2.

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ź

+1 głos
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>

 

Podobne pytania

+2 głosów
3 odpowiedzi 210 wizyt
pytanie zadane 3 października 2020 w HTML i CSS przez new103 Nowicjusz (190 p.)
0 głosów
1 odpowiedź 156 wizyt
pytanie zadane 10 października 2018 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 407 wizyt
pytanie zadane 25 lipca 2018 w HTML i CSS przez agipacz Początkujący (460 p.)

85,871 zapytań

134,644 odpowiedzi

298,914 komentarzy

56,738 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 926p. - rucin93
  2. 925p. - Whistleroosh
  3. 912p. - nidomika
  4. 876p. - adrian17
  5. 867p. - Michal Drewniak
  6. 866p. - Mikbac
  7. 863p. - Mateusz Bogdan
  8. 859p. - CC PL
  9. 797p. - Argeento
  10. 704p. - ScriptyChris
  11. 683p. - tokox
  12. 660p. - Vinox
  13. 645p. - TheLukaszNs
  14. 642p. - s. Dorota Kowalewska
  15. 601p. - Marcin Harasimowicz
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...