Równe div i 100% wzrost w bootstrap

Question

Próbuję zrobić stronę z 5 DIV.
Plan jest umieścić jeden obraz w centrum DIV oraz łącza w każdym z pozostałych 4, stosując Bootstrap 3.

kupna wynik:

kod do tej pory:

.container-fluid2 { 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
    background-color: black; 
 
} 
 
.levogore5 { 
 
    height: 50%; 
 
    min-height: 50%; 
 
    margin-bottom: -22%; 
 
    padding-bottom: 22%; 
 
    min-width: 25%; 
 
    max-width: 100%; 
 
    background-color: lime; 
 
    vertical-align: top; 
 
} 
 
.levodole5 { 
 
    height: 50%; 
 
    min-height: 50%; 
 
    margin-bottom: -25%; 
 
    padding-bottom: 25%; 
 
    min-width: 25%; 
 
    max-width: 100%; 
 
    background-color: green; 
 
    vertical-align: baseline; 
 
    margin-top: 22%; 
 
} 
 
.centar5 { 
 
    height: 100%; 
 
    min-height: 100%; 
 
    min-width: 50%; 
 
    max-width: 100%; 
 
    background-color: red; 
 
    margin-bottom: -50%; 
 
    padding-bottom: 50%; 
 
    overflow: hidden; 
 
} 
 
.desnogore5 { 
 
    height: 50%; 
 
    min-height: 50%; 
 
    margin-bottom: -22%; 
 
    padding-bottom: 22%; 
 
    min-width: 25%; 
 
    max-width: 100%; 
 
    background-color: aqua; 
 
    vertical-align: top; 
 
} 
 
.desnodole5 { 
 
    height: 50%; 
 
    min-height: 50%; 
 
    margin-bottom: -25%; 
 
    padding-bottom: 25%; 
 
    min-width: 25%; 
 
    max-width: 100%; 
 
    background-color: blue; 
 
    vertical-align: baseline; 
 
    float: right; 
 
    margin-top: 22%; 
 
}

<div class="container-fluid2"> 
 
    <div class="row"> 
 
    <div class="col-sm-3 levogore5">levo gore</div> 
 
    <div class="col-sm-5 col-sm-5 span2 centar5">centralni</div> 
 
    <div class="col-sm-3 desnogore5">desno gore</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-3 levodole5">levo dole</div> 
 
    <div class="col-sm-3 desnodole5">desno dole</div> 
 
    </div> 
 
</div>

Myślę, że przeczytałem wszystkie istniejące q Tutaj znajdują się pytania i odpowiedzi.
Próbowałem html/body 100%, max-height, container-fluid, -9999px, ale nie działa.

Zapomniałem wspomnieć, elastyczność jest niezbędna, aw moim przykładzie tych pływaka: prawo (w CSS dla ostatniego DIV), zrobić bardzo duży bałagan na mniejszych ekranach.

moim pomysłem jest użycie bootstrap mieć mniej problemów z mniejszymi ekranami, w bardziej prostszych stron ładowania początkowego po prostu zrobić kupę DIV poziomych więc mam nadzieję, że coś takiego

Answer 1

Responsive przykład bez modyfikowania bootstrap siatki (dodatkowo punkty dlatego, że powinnam Zmodyfikuj tabelę lub nie będziesz mógł jej użyć w każdym scenariuszu)

Musiałem zmienić twój html i dodać kilka klas:

<div class="container-fluid container-table"> 
    <div class="row inline-row"> 
    <!-- I'm using three columns and nesting aqua and blue under the 1st column --> 
    <div class="col-xs-12 col-sm-3"> 
     <div class="row"> 
     <div class="col-xs-12 aqua"></div> 
     <div class="col-xs-12 blue"></div> 
     </div> 
    </div> 

    <div class="col-xs-12 col-sm-6 yellow"></div> 

    <!-- Nesting greenyellow and green --> 
    <div class="col-xs-12 col-sm-3"> 
     <div class="row"> 
     <div class="col-xs-12 greenyellow"></div> 
     <div class="col-xs-12 green"></div> 
     </div> 
    </div> 

    </div> 
</div> 

I CSS:

/* Colors */ 
.aqua{ background-color:aqua; } 
.blue{ background-color:blue; } 
.yellow{ background-color:yellow; } 
.greenyellow{ background-color:greenyellow; } 
.green{ background-color:green; } 

/* Height 100% to all the elements */ 
html, 
body, 
.container-table, 
.inline-row, 
.inline-row > div { 
    height: 100%; 
} 

/* We do the trick here with Table, table row and table-cell */ 
.container-table { 
    display: table; 
    width: 100%; /* Width is important for display:table */ 
} 
.inline-row { display: table-row; } 
.inline-row > div { display: table-cell; } 

/* This will set our heights as we need them */ 
.inline-row > div > .row { height: 100%; } 
.inline-row > div .row > div { height: 50%; } 

EDIT: Zmieniono prawo i lewo Siatka do 25% szerokości.

My JsFiddle Live example

Answer 2

ten jest doskonałym przykładem miejsca do użytku flex box!

Wydaje mi się, że bierzesz podejścia opartego rząd do tego. Myślę, że podejście oparte na kolumnach jest bardziej odpowiednie.

Kiedy jestem projektowania witryny, lubię próbować złamać go na kwadraty lub prostokąty, że przejść całą drogę na całej szerokości lub wysokości strony.

Moim zdaniem, ten projekt ma 1 prostokąt przechodzący przez szerokość strony, która zawiera 3 prostokąty przechodzące przez całą wysokość strony, a następnie kilka mniejszych prostokątów w każdej z nich.

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.column > div { 
 
    border: 1px solid blue; 
 
    min-height: 150px; 
 
} 
 
@media (min-width: 600px) { 
 
    .row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    min-height: 100vh; 
 
    } 
 
    .row > div { 
 
    flex-basis: 25%; 
 
    } 
 
    .row > div.main { 
 
    flex-basis: 50%; 
 
    } 
 
    .column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .column > div { 
 
    flex-basis: 50%; 
 
    } 
 
    .column.main > div { 
 
    flex-basis: 100%; 
 
    } 
 
}

<div class="row"> 
 
    <div class="column"> 
 
    <div>Div width 25% height 50%</div> 
 
    <div>Div width 25% height 50%</div> 
 
    </div> 
 
    <div class="column main"> 
 
    <div>Div width 50% height 100%</div> 
 
    </div> 
 
    <div class="column"> 
 
    <div>Div width 25% height 50%</div> 
 
    <div>Div width 25% height 50%</div> 
 
    </div> 
 
</div>

Answer 3

Fiddle

W skrócie, robisz 6 pól.
Czy nie chcesz również, aby między nimi były wypełnienia?

Jeśli tak, to po prostu dodać do swojego CSS:

[class*='col-'] { 
    padding-right:0; 
    padding-left:0; 
} 

HTML:

<div class="container-fluid2"> 
    <div class="row"> 
    <div class='col-sm-3'> 
     <div class="bg-color-red">left 3</div> 
     <div class="bg-color-green">left 3</div> 
    </div> 
    <div class="col-sm-6 bg-color-green"> 
      <div class="bg-color-green">central 6</div> 
    <div class="bg-color-green">central 6</div> 
    </div> 

    <div class='col-sm-3'> 
     <div class="bg-color-red">right 3</div> 
     <div class="bg-color-green">right 3</div> 
    </div> 
    </div> 
</div> 

CSS:
Bootstrap. Zobacz skrzypce.

Answer 4

Dałem wam kod poniżej której będzie pracować z mniejszą pulpicie największego pulpicie (we wszystkich przypadkach) z bootstrap.Jak powiedział lubisz pale, jeśli chodzi o mobilne wtedy po prostu nie pisać col-sm-* klas i @media zapytanie

.height-50{ 
 
    height : 480px; 
 
} 
 

 
.height-100{ 
 
    height : 960px; 
 
} 
 

 
.container-fluid div{ 
 
    border : 1px solid black; 
 
} 
 

 
@media (min-width: 576px) { 
 
    .height-50{ 
 
    height : 230px; 
 
    } 
 

 
    .height-100{ 
 
    height : 460px; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
 
<div class="container-fluid"> 
 
    <div class="col-lg-3 col-sm-3"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 col-sm-12 height-50" style="background-color : lightgray"> 
 
     Width : 25%;<br>Height : 50%; 
 
     </div> 
 
     <div class="col-lg-12 col-sm-12 height-50" style="background-color : #9898e7"> 
 
     Width : 25%;<br>Height : 50%; 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-6 col-sm-6"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 col-sm-12 height-100" style="background-color : yellow"> 
 
     Width : 50%;<br>Height : 100%; 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-3 col-sm-3"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 col-sm-12 height-50" style="background-color : yellowgreen"> 
 
     Width : 25%;<br>Height : 50%; 
 
     </div> 
 
     <div class="col-lg-12 col-sm-12 height-50" style="background-color : green"> 
 
     Width : 25%;<br>Height : 50%; 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>