Problem:
Usuń wyściełanie/margines z prawej i lewej strony col-md-* w Bootstrap 3.
KodHTML:
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content" id="">
<div id='jqxWidget'>
<div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
<div style="clear:both;" id="listBoxB"></div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 362px;"></div>
</div>
</div>
</div>
</div>
Pożądane dane wyjściowe:
Obecnie ten kod dodaje padding/margin po prawej i lewej stronie dwóch kolumn. Zastanawiam się, czego mi brakuje, aby usunąć tę dodatkową przestrzeń po bokach?
Uwaga:
Jeśli usunę "col-md-4", wtedy obie kolumny rozszerzają się do 100%, ale chcę, aby były obok siebie.
Normalnie używałbyś .row
do zawijania dwóch kolumn, a nie .col-md-12
- to'jest kolumna otaczająca inną kolumnę. W końcu, .row
nie ma dodatkowych marginesów i wypełnienia, które przyniosłoby col-md-12
, a także dyskontuje przestrzeń, którą kolumna wprowadziłaby z ujemnymi lewymi & prawymi marginesami.
<div class="container">
<div class="row">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4 nopadding">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
<div class="col-md-8 nopadding">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
</div>
</div>
jeśli naprawdę chciałbyś usunąć padding/marginesy, dodaj klasę, aby odfiltrować marginesy/paddingi dla każdej kolumny dziecka.
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
Bootstrap 4 dodał klasę .no-gutters
.
Bootstrap 3: Zawsze dodaję ten styl do mojego Bootstrap LESS / SASS:
.row-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
Następnie w HTML możesz napisać:
<div class="row row-no-padding">
Jeśli chcesz kierować tylko na kolumny dzieci, możesz użyć selektora dziecka (Dzięki John Wu).
.row-no-padding > [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
Możesz także chcieć usunąć padding tylko dla niektórych rozmiarów urządzeń (przykład SASS):
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.row-sm-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
}
Możesz usunąć część max-width z zapytania o media, jeśli chcesz, aby obsługiwał małe urządzenia w górę.
Możesz stworzyć nową klasę do usuwania marginesu i zastosować ją do elementu, w którym chcesz usunąć dodatkowy margines:
.margL0 { margin-left:0 !important }
!important : pomoże Ci to usunąć domyślny margines lub nadpisać aktualną wartość marginesu
i zastosować do tego div, z którego chcesz usunąć margines z lewej strony