Jak dostosować szerokość kolumn Bootstrap?

Question

Mam to, ale czuję, że 4 jest zbyt duże dla szerokości paska bocznego, a 3 jest zbyt małe (musi dodać do 12).

<div class="col-md-8"> 
    <div class="col-md-4"> 

próbowałem tego, ale to nie działa:

<div class="col-md-8.5"> 
    <div class="col-md-3.5"> 

Czy istnieje inny sposób, aby uzyskać podobny rezultat?

Dzięki za pomoc!

Answer 1

Aby rozwinąć na odpowiedź @ Isherwooda, tu jest kompletny kod do tworzenia niestandardowych -sm- szerokości w Bootstrap 3.3

W ogóle chcesz szukać istniejącej szerokości kolumny (słownie col-sm-3) i skopiować wszystkich stylów, które zastosuj do niego, w tym ogólne, do niestandardowego arkusza stylów, w którym definiujesz nowe szerokości kolumn.

.col-sm-3half, .col-sm-8half { 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
} 

@media (min-width: 768px) { 
    .col-sm-3half, .col-sm-8half { 
     float: left; 
    } 
    .col-sm-3half { 
     width: 29.16666667%; 
    } 
    .col-sm-8half { 
     width: 70.83333333%; 
    } 
} 

Answer 2

można dostosować bootstrap stylów, na przykład:

.col-md-8{ 
    width: /*as you wish*/; 
} 

Następnie ustaw zapytania mediów za to też, jak w:

@media screen and (max-width:768px){ 
    .col-md-8{ 
    width:99%; 
    } 
} 

Answer 3

Można oczywiście tworzyć własne klasy:

.col-md-3point5 {width: 28.75%} 
.col-md-8point5 {width: 81.25%;} 

Zrobiłbym to, zanim zadziwiłbym się domyślnymi kolumnami. Możesz użyć tych wewnątrz nich.

Prawdopodobnie chcesz umieścić te słowa w zapytaniu o media, aby miały one zastosowanie tylko do rozmiarów ekranu większych niż mobilne.

Answer 4

Dla siatki 12 kolumn, jeśli chcesz dodać połowę kolumny (4,16667%) do każdej szerokości kolumny. Oto co robisz.

Na przykład, Col-MD- X zdefiniować .col-MD- X 5 następujące wartości.

.col-md-1-5 { width: 12,5%; } // = 8,3333 + 4,16667 
.col-md-2-5 { width: 20,83333%; } // = 16,6666 + 4,16667 
.col-md-3-5 { width: 29,16667%; } // = 25 + 4,16667 
.col-md-4-5 { width: 37,5%; } // = 33,3333 + 4,16667 
.col-md-5-5 { width: 45,83333%; } // = 41,6667 + 4,16667 
.col-md-6-5 { width: 54,16667%; } // = 50 + 4,16667 
.col-md-7-5 { width: 62,5%; } // = 58,3333 + 4,16667 
.col-md-8-5 { width: 70,83333%; } // = 66,6666 + 4,16667 
.col-md-9-5 { width: 79,16667%; } // = 75 + 4,16667 
.col-md-10-5 { width: 87,5%; } // = 83,3333 + 4,16667 
.col-md-11-5 { width: 95,8333%; } // = 91,6666 + 4,16667 

Zaokrąglam określone wartości.

Po drugie, aby uniknąć kopiowania kodu css z oryginału col-md-X, użyj ich w deklaracji klasy. Uważaj, że powinny one zostać zmienione przed przed. W ten sposób tylko szerokość zostanie zastąpiona.

<div class="col-md-2 col-md-2-5">...</div> 
<div class="col-md-5">...</div> 
<div class="col-md-4 col-md-4-5">...</div> 

Wreszcie, nie zapominaj, że suma nie powinna przekraczać 12 kolumn, które łącznie 100%.

Mam nadzieję, że to pomoże!

Answer 5

Można użyć własnych wstawek kolumn Bootstrap za make-xx-column():

.col-md-8half { 
    .make-md-column(8.5); 
} 

.col-md-3half { 
    .make-md-column(3.5); 
}