Jak usunąć przestrzeń rynny tylko dla określonego div - bootstrap

Aktualizacja 2018

Dla Bootstrap 3 , jest o wiele łatwiej. Bootstrap 3 używa teraz wyściółki zamiast marginesów, aby utworzyć "rynnę".

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

Następnie po prostu dodaj no-gutter do wierszy, w których odstępy mają być usunięte:

  <div class="row no-gutter">
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
  </div>

Demo: http://bootply.com/107708

Bootstrap 4 (nie wymaga dodatkowego CSS)

Bootstrap 4 zawiera klasę no-gutters, która może być zastosowana do całego row:

Http://www.codeply.com/go/pVsGQZVVtG

<div class="row no-gutters">
    <div class="col">..</div>
    <div class="col">..</div>
    <div class="col">..</div>
</div>

Istnieją również nowe utile odstępów , które umożliwiają kontrolę wypełnienia/marginesów. Tak więc może to być użyte do zmiany wyściółki (rynny) dla pojedynczej kolumny (ie: <div class="col-3 pl-0"></div>) ustawia padding-left:0; na kolumnie, lub użyć px-0, aby usunąć zarówno lewą, jak i prawą wyściółkę (oś x).

Update: link do TWBS 3 getbootstrap.com/customize/#grid-system

Twitter Bootstrap oferuje dostosuj formularz, Aby pobrać wszystkie lub niektóre komponenty z niestandardową konfiguracją.

Możesz użyć tego formularza, aby pobrać siatkę bez rynien i będzie ona responsywna - potrzebujesz tylko komponentu grid i responsywnych dotyczących szerokości.

Demo (jsfiddle)

Jeśli wiesz trochę o Mniej , to może zawierać wygenerowany CSS w wybranym selektorze.

/* LESS */
.some-thing {
    /* The custom grid
      ...
    */
}

Jeśli nie, powinieneś dodać ten selektor przed każdą regułą(i tak nie za dużo).

Jeśli wiesz mniej i używasz skryptów LESS do zarządzania stylami, możesz użyć bezpośrednio Grid mixins v2 (github)

Grid mixins v3 (github)

Całkowita szerokość jest obliczana z szerokością elementów plus szerokością przestrzeni marginesów. Jeśli chcesz usunąć przestrzeń marginesu, to w porządku, ale aby uniknąć wspomnianej luki, musisz również zwiększyć szerokość kolumn.

W tym przypadku należy zwiększyć szerokość pojedynczej kolumny o jej usuniętą przestrzeń marginesu, która wynosiłaby 30px.

Załóżmy więc, że szerokość kolumn wynosi 50px normalnie z odstępem marginesu 30PX. Usuń przestrzeń marginesu i zrób / width = 80PX /

Przykład 4 kolumn span3. Dla innych szerokości przęseł użyj nowej szerokości = starej szerokości + rozmiaru rynny. Użyj zapytań o media, aby reagować.

Css:

    <style type="text/css">
    @media (min-width: 1200px) 
    {   
        .nogutter .span3
        {
            margin-left: 0px; width:300px;
        }   
    }
    @media (min-width: 980px) and (max-width: 1199px) 
    { 
        .nogutter .span3
        {
            margin-left: 0px; width:240px;
        }   
    }
    @media (min-width: 768px) and (max-width: 979px) 
    { 
        .nogutter .span3
        {   
            margin-left: 0px; width:186px;
        }   
    }
    </style>

Html:

<div class="container">
<div class="row">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div>
<br>
<div class="row nogutter">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div> 
</div>

Update : lub podzielić span12 div na 100 / numberofcolumns % width parts floating left:

<div class="row">
  <div class="span12">
    <div style="background-color:green;width:25%;float:left;">...</div>
  <div style="background-color:yellow;width:25%;float:left;">...</div>
  <div style="background-color:red;width:25%;float:left;">...</div>
  <div style="background-color:blue;width:25%;float:left;">...</div>
  </div>
</div>  

Dla obu rozwiązań patrz: http://bootply.com/61557

Ciekawe...

Usunięcie rynny w domyślnej siatce Twittera Bootstrap, czyli szerokości 940px. I że domyślna siatka ma kontener o szerokości 940px i reaguje na bootstrap.css w arkuszu stylów.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stackoverflow Question</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/bootstrap-responsive.css">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
    <![endif]-->




    <style type="text/css">
        #main_content [class*="span"] {
            margin-left: 0;
            width: 25%;
        }

        @media (min-width: 768px) and (max-width: 979px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 25%;
            }
        }


        @media (max-width: 767px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 100%;
            }
        }

        @media (max-width: 480px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 100%;
            }
        }

        <!-- For Visual Aid Only -->
        .bg1 {
            background-color: #C2C2C2;
        }

        .bg2 {
            background-color: #D2D2D2;
        }
    </style>
  <body>
    <div id="wrap">
        <div class="container">
            <div class="row-fluid">
                <div class="span1 text-center bg1">01</div>
                <div class="span1 text-center bg2">02</div>
                <div class="span1 text-center bg1">03</div>
                <div class="span1 text-center bg2">04</div>
                <div class="span1 text-center bg1">05</div>
                <div class="span1 text-center bg2">06</div>
                <div class="span1 text-center bg1">07</div>
                <div class="span1 text-center bg2">08</div>
                <div class="span1 text-center bg1">09</div>
                <div class="span1 text-center bg2">10</div>
                <div class="span1 text-center bg1">11</div>
                <div class="span1 text-center bg2">12</div>
            </div>



            <div id="main_content">
                <div class="row-fluid">
                    <div class="span3 text-center bg1">1</div>
                    <div class="span3 text-center bg2">2</div>
                    <div class="span3 text-center bg1">3</div>
                    <div class="span3 text-center bg2">4</div>
                </div>
            </div>
        </div><!--/container-->
    </div>
  </body>
</html>

I wynik jest..

Rozpiętość 4 div bez rynny pozostanie rozpiętość dla małych tablet krajobraz (800x600). Cokolwiek rozmiar mniejszy niż to zawali 4 divs i będzie ułożony pionowo. Oczywiście będziesz musiał dostosować go do swoich potrzeb.

Najprostszym sposobem na usunięcie wypełnienia i marginesu jest prosty css.

<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>

W porządku, jeśli chcesz zmienić rynnę w jednym wierszu, ale chcesz, aby te (pierwsze i ostatnie) wewnętrzne div były wyrównane do siatki otaczającej wiersz .no-gutter, możesz skopiować-wkleić-scalić większość odpowiedzi do następującego fragmentu:

.row.no-gutter [class*='col-']:first-child:not(:only-child) {
    padding-right: 0;
}
.row.no-gutter [class*='col-']:last-child:not(:only-child) {
    padding-left: 0;
}
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child):not(:only-child) {
    padding-right: 0;
    padding-left: 0;
}

Jeśli chcesz mieć mniejszą rynnę zamiast całkowicie żadnej, po prostu zmień 0 na to, co lubisz... (np.: 5px aby uzyskać 10px).

Aby dodać do Bootstrap 3 no-gutter odpowiedź powyżej ( https://stackoverflow.com/a/21282059/662883 )

Aby zapobiec powstawaniu rynien w wierszu zawierającym tylko jedną kolumnę (przydatne przy owijaniu kolumn: http://getbootstrap.com/css/#grid-example-wrapping):

.row.no-gutter [class*='col-']:only-child,
.row.no-gutter [class*='col-']:only-child
{
    padding-right: 0;
    padding-left: 0;
}