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

question-closed Bootstrap - łączenie kolumny w dwóch rzędach

VPS Starter Arubacloud
0 głosów
254 wizyt
pytanie zadane 27 czerwca 2023 w HTML i CSS przez Skulak Nowicjusz (240 p.)
zamknięte 17 lipca 2023 przez Skulak

Cześć,

chciałbym uzyskać taki layout w bootstrapie:

Znalazłem taką metodę:

<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="row">
                <div class="col-12">
                    <div class="sidebarContent">Side Bar 1</div>
                </div>
            </div>
            <!--Nested rows-->
            <div class="row">
                <div class="col-12">
                    <div class="sidebarContent">Side Bar 2</div>
                </div>
            </div>
        </div>
        <div class="col-9">
            <div class="mainContent">Main Content Area</div>
        </div>
    </div>
</div>

Czy istnieje możliwość zastosowania takiej metody (czy to jest nesting w bootstrapie?) w moim przypadku, czy pozostaje użyć klasy order

Dzięki za odpowiedź, pozdrawiam.

 

komentarz zamknięcia: rozwiązane
komentarz 28 czerwca 2023 przez jankustosz1 Nałogowiec (35,940 p.)

Nie prościej gridem w ten sposób?
 

#container{
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template:             
          "a mid c"            
          "b mid d" ;
}
.blue{
   background-color: blue;
   grid-area: a; 
}
.red{
   background-color: red;
   grid-area: mid; 
}
.yellow{
   background-color: yellow;
   grid-area: b; 
}
.green{
   background-color: lime;
   grid-area: c; 
}
.black{
   background-color: black;
   grid-area: d; 
}

 

komentarz 29 czerwca 2023 przez Skulak Nowicjusz (240 p.)
Tak wiem, ale uczę się obecnie bootstrapa i w projekcie natrafiłem na taki problem, więc jestem ciekawy czy można go rozwiązać samym bootstrapem ;)

1 odpowiedź

+1 głos
odpowiedź 28 czerwca 2023 przez VBService Ekspert (254,880 p.)
wybrane 17 lipca 2023 przez Skulak
 
Najlepsza

Może najpierw ...

 

podziel na 3 kolumny

<div class="container-fluid g-0">
  <div class="row g-0">
  
    <div class="col">
        <!-- Side Bar 1   Side Bar 2 -->
    </div>
    
    <div class="col">
        <!-- Main Content Area -->
    </div>
    
    <div class="col">
        <!-- Side Bar 3   Side Bar 4 -->
    </div>
    
  </div>
</div>

a potem w pierwszej i ostatniej kolumnie dodaj

      <div class="row g-0">
        <div class="sidebarContent">Side Bar x</div>
      </div>
      <div class="row g-0">
        <div class="sidebarContent">Side Bar y</div>
      </div> 

 

całość: on-line  (Bootstrap 5.x)

komentarz 29 czerwca 2023 przez Skulak Nowicjusz (240 p.)
Dziękuję bardzo :)
1
komentarz 3 lipca 2023 przez avexperi Początkujący (440 p.)
czemu nie kliknąć, że rozwiązane?

Podobne pytania

0 głosów
1 odpowiedź 997 wizyt
pytanie zadane 17 listopada 2018 w HTML i CSS przez Q_Nick Mądrala (5,010 p.)
0 głosów
1 odpowiedź 282 wizyt
0 głosów
0 odpowiedzi 356 wizyt
pytanie zadane 30 kwietnia 2019 w C# przez gagyn Stary wyjadacz (11,050 p.)

92,765 zapytań

141,690 odpowiedzi

320,503 komentarzy

62,106 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...