Porównaj ceny domen i usług IT, sprzedawców z całego świata

Siatka Bootstrap 3 bez przerwy


Próbuję utworzyć siatkę z 2 kolumnami, dosłownie 50% bez marginesów i wypełnienia.
Jak to osiągnąć za pomocą Bootstrap 3 Próbowałem tego, ale skończyło się na ujemnych marginesach w punktach przerwania tabletu/pulpitu:
HTML
<div class="container">
<div class="row">
<div class="col-sm-6 offset-0">Col 1
<div class="col-sm-6 offset-0">Col 2

</diV>

CSS
.container {
background: green;
overflow: hidden;
}.row > * {
background: blue;
color: #fff;
}.row :first-child {
background: red;
}.offset-0 {
padding-left: 0;
padding-right: 0;
}

DEMO -

http://jsfiddle.net/pjBzY
http://jsfiddle.net/pjBzY/
/
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Inną opcją jest utworzenie własnej niestandardowej klasy CSS dla każdego przypadku, w którym chcesz używać kolumn „gutterless”.
HTML
<div class="container">
<div class="row no-gutter">
<div class="col-6 col-sm-6 col-lg-6">Col 1
<div class="col-6 col-sm-6 col-lg-6">Col 2


CSS
.no-gutter [class*="-6"] {
padding-left:0;
}

Próbny:

http://bootply.com/73960
http://bootply.com/73960
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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">
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Będziesz musiał zastąpić ujemne marginesy z
.row
na dużych ekranach bezpośrednio lub za pomocą niestandardowej klasy
@media (min-width: 768px){
.row {
margin-right: 0;
margin-left: 0;
}
}


Zaktualizowane skrzypce

http://jsfiddle.net/pjBzY/4/embedded/result/
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

System siatki w Bootstrap 3 wymaga pewnych bocznych zmian w myśleniu w porównaniu z Bootstrap 2. Kolumna w BS2 (
col- *
) NIE jest synonimem kolumny w BS3 (
col-sm- *
i tak dalej), ale istnieje sposób na osiągnięcie tego samego wyniku. [/code]Sprawdź tę aktualizację dla swoich skrzypiec:

http://jsfiddle.net/pjBzY/22/
http://jsfiddle.net/pjBzY/22/
(kod skopiowany poniżej).
Po pierwsze, nie musisz określać col dla każdego rozmiaru ekranu, jeśli chcesz mieć kolumny 50/50 wszystkich rozmiarów.
col-sm-6
dotyczy nie tylko małych ekranów, ale także średnich i dużych jedynki, co oznacza, że ​​
class = "col-sm-6 col-md-6"
to przesada (korzyść pojawia się, gdy chcesz zmienić szerokość kolumn na ekranach o różnych rozmiarach, takich jak
col-sm -6 col-md-8
).
Jeśli chodzi o marginesy, marginesy ujemne zapewniają sposób wyrównywania bloków tekstu w sposób bardziej elastyczny niż było to możliwe w BS2. Zauważysz, że w jsfiddle tekst w pierwszej kolumnie jest wizualnie wyrównany z tekstem w akapicie poza
wiersz
- z wyjątkiem wymiarów pola „xs”, w przypadku których nie zastosowano żadnych kolumn.
Jeśli chcesz, aby zachowanie było bliższe BS2, gdzie między każdą kolumną jest wypełnienie i nie ma wizualnych ujemnych marginesów, musisz dodać wewnętrzny element div do każdej kolumny. Zobacz
inner-content
w moim jsfiddle. Umieść coś takiego w każdej kolumnie, a będą zachowywać się tak jak stare elementy
col- *
w BS2.
jsfiddle HTML
<div class="container">
<p class="other-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam sed sem nec viverra. Phasellus fringilla metus vitae libero posuere mattis. Integer sit amet tincidunt felis. Maecenas et pharetra leo. Etiam venenatis purus et nibh laoreet blandit. <div class="row">
<div class="col-sm-6 my-column">
Col 1
<p class="inner-content">Inner content - THIS element is more synonymous with a Bootstrap 2 col-*.
<div class="col-sm-6 my-column">
Col 2



i CSS
.row {
border: blue 1px solid;
}.my-column {
background-color: green;
padding-top: 10px;
padding-bottom: 10px;
}.my-column:first-child {
background-color: red;
}.inner-content {
background: #eee;
border: #999;
border-radius: 5px;
padding: 15px;
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jestem pewien, że musi istnieć sposób na zrobienie tego bez pisania własnego CSS, to szalone, muszę przepisać marginesy i wypełnienie, chciałem tylko 2-kolumnowej siatki.
.row-offset-0 {
margin-left: 0;
margin-right: 0;
}.row-offset-0 > * {
padding-left: 0;
padding-right: 0;
}

http://jsfiddle.net/KxCkD
http://jsfiddle.net/KxCkD/
/
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Podsumowując pomysły z martinedwards i innych, możesz skleić kilka kolumn razem (nie tylko kilka), dostosowując wypełnienie parzystych i nieparzystych kolumn potomnych. Dodanie tej definicji klasy
.no-gutter
i umieszczenie jej w elemencie
.row
.row.no-gutter > [class*='']:nth-child(2n+1) {
padding-right: 0;
} .row.no-gutter > [class*='']:nth-child(2n) {
padding-left: 0;
}

Lub w SCSS:
.no-gutter {
> [class*=''] {
&:nth-child(2n+1) {
padding-right: 0;
}
&:nth-child(2n) {
padding-left: 0;
}
}
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Udzielona odpowiedź

@yuvilio
https://stackoverflow.com/users/462002/yuvilio, działa dobrze dla dwóch kolumn, ale dla więcej niż dwóch

to jest
http://codepen.io/JulienMelissas/pen/jEpbEY
stąd może być najlepszym rozwiązaniem. W podsumowaniu:
.row.no-gutters {
margin-right: 0;
margin-left: 0; & > [class^="col-"],
& > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Użyj „clearfix” zamiast „row”. Robi to samo, z tym że nie ma ujemnego marginesu. Przejdź przez użycie „wiersza”, a zobaczysz, że to jedyna różnica.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Mocniejsza (iw 100% płynna) siatka Bootstrap 3 jest teraz dostępna w 3 rozmiarach. Tiny (dla smartfonów. Col-
), małe (dla tabletów. col-sm-
) i duże (dla laptopów/komputerów stacjonarnych. col-lg- *). Trzy rozmiary siatki pozwalają kontrolować zachowanie sieci na różnych urządzeniach (komputery stacjonarne, tablety, smartfony itp.).
W przeciwieństwie do 2.x, Bootstrap 3 nie zapewnia stałej (pikselowej) siatki. Chociaż układ o stałej szerokości można nadal uzyskać za pomocą prostego niestandardowego opakowania, obecnie istnieje tylko jeden procent (płynny) układ. Klasy .container i .row są teraz domyślnie płynne, więc nie używaj już .row-fluid ani .container-fluid w znacznikach 3.x.
Źródło
http://www.bootply.com/migrate-to-bootstrap-3
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Możesz po prostu użyć poniższej klasy.
<div class="snippet-code">
<div class="snippet" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">
.nopadmar {
padding: 0 !important;
margin: 0 !important;
}

<pre class="snippet-code-html lang-html prettyprint-override">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 nopadmar">Your Content<div>
<div class="col-md-6 nopadmar">Your Content<div>

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się