Mam dwie grupy, A i B. W widoku mobilnym pasek boczny będzie umieszczony nad treścią A. Podobnie dla grupy B. Jednak napotykam dwa problemy w / moim dwie kolumny układ Bootstrap.
Problem 1 W widoku mobilnym treść A utknęłaza bocznym panelem B. Próbowałem dodać klasy float i wyczyścić pływaki, indeks Z, pozycjonowanie itp., i nie jestem w stanie zmusić ich do użycia A, B, A, B = /
Problem nr 2 ... czy chcę, aby maksymalna wysokość wynosiła 100%, ale to, co otrzymuję, to 100% wzrostu tylko dla grupy A. Jakie metody mogę zastosować, aby dopasować obie grupy A i B (razem) 100 % na stronie?
Mój kod jest następujący; Doceniam wszelką pomoc! Dzięki za tonę.
HTML
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 a">
Sidebar content A
</div>
<div class="col-sm-8">
Body content A
</div>
</div> <!-- end row -->
</div> <!-- end col-sm-12 -->
</div> <!-- end container-fluid -->
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 b">
Sidebar content B
</div>
<div class="col-sm-8">
Body content B
</div>
</div> <!-- end row -->
</div> <!-- end col-sm-12 -->
</div> <!-- end container-fluid -->
CSS
html,body,.col-sm-12,.container-fluid, .row {
height:100%;
}
.row > div {
height:100%;
}
.a, .b {
background-color:#e5e5e5;
}
Daj mi znać, czego mi brakuje.
Odpowiedzi:
0 dla odpowiedzi № 1Możesz po prostu dodać
col-xs-12
do twoich div, by zatrzymać dziwne nakładanie się - tak twój html by czytał
<div class="col-sm-4 col-xs-12 a">
Sidebar content A
</div>
<div class="col-sm-8 col-xs-12">
Body content A
</div>
Jeśli chodzi o problem wysokości, możesz zastosować nową klasę do swoich wierszy i zaktualizować swoje css w następujący sposób:
html,
body {
height: 100%;
}
.container-fluid {
height: 50%;
}
.col-sm-12,
.fullheight {
height: 100%;
}
.a,
.b {
background-color: #e5e5e5;
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="col-sm-12">
<div class="row fullheight">
<div class="col-sm-4 col-xs-12 fullheight a">Sidebar content A</div>
<div class="col-sm-8 col-xs-12 fullheight">Body content A</div>
</div>
<!-- end row -->
</div>
<!-- end col-sm-12 -->
</div>
<!-- end container-fluid -->
<div class="container-fluid">
<div class="col-sm-12">
<div class="row fullheight">
<div class="col-sm-4 col-xs-12 fullheight b">Sidebar content B</div>
<div class="col-sm-8 col-xs-12 fullheight">Body content B</div>
</div>
<!-- end row -->
</div>
<!-- end col-sm-12 -->
</div>
<!-- end container-fluid -->