Czy mogę podać col-md-1.5 w bootstrapie?

Chcę dostosować kolumny w serwisie Twitter Boοtstrap.

Wiem, że w bootstrapie jest 12 siatek kolumn. Czy istnieje sposób na manipulowanie siatkami tak, aby miały 1,5 3,5 3,5 3,5 zamiast 3 3 3 3?

Jak słusznie powiedział @ bodi0 , nie jest to możliwe. Musisz albo rozszerzyć system siatki Bootstrap (możesz wyszukiwać i znajdować różne rozwiązania, tutaj przykład 7 kolumn) lub użyć zagnieżdżonych wierszy, np . Http://bootply.com/dd50he9tGe .

W przypadku wierszy zagnieżdżonych możesz nie zawsze otrzymać dokładny wynik, ale podobny

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

Chmura jest również po prostu nadpisywana szerokości kolumny ...

<div class="col-md-1" style="width: 12.499999995%"></div>

Ponieważ col-md-1ma szerokość 8,33333333%; po prostu pomnóż 8,33333333 * 1,5 i ustaw jako swoją szerokość.

w bootstrap 4, będziesz też musiał nadpisać właściwość flex i max-width:

<div class="col-md-1" style="width: 12.499999995%;
    flex: 0 0 12.499%;max-width: 12.499%;"></div>

Krótka odpowiedź brzmi: nie (technicznie rzecz biorąc, możesz podać dowolną nazwę klasy, którą chcesz, ale to nie przyniesie efektu, chyba że zdefiniujesz własną klasę CSS - i pamiętaj - bez kropek w selektorze klas). Długa odpowiedź znowu brzmi: nie , ponieważ Bootstrap zawiera responsywny , mobilny pierwszy system płynnej siatki, który odpowiednio skaluje do 12 kolumn w miarę wzrostu rozmiaru urządzenia lub portu widoku.

Wiersze muszą być umieszczone w obrębie .container(o stałej szerokości) lub .container-fluid(pełnej szerokości), aby zapewnić prawidłowe wyrównanie i wypełnienie.

• Użyj wierszy, aby utworzyć poziome grupy kolumn.
• Treść powinna być umieszczona w kolumnach, a tylko kolumny mogą być bezpośrednimi elementami podrzędnymi wierszy.
• Predefiniowane klasy siatki, takie jak .rowi .col-xs-4są dostępne do szybkiego tworzenia układów siatki. W przypadku układów bardziej semantycznych można również użyć mniejszej liczby mikserów.
• Kolumny tworzą odstępy (przerwy między zawartością kolumn) poprzez wypełnienie. To wypełnienie jest przesunięte w wierszach dla pierwszej i ostatniej kolumny poprzez ujemny margines .rows.
• Kolumny siatki tworzy się, określając liczbę dwunastu dostępnych kolumn, które chcesz rozciągnąć. Na przykład trzy równe kolumny użyłyby trzech .col-xs-4.
• Jeśli więcej niż 12 kolumn zostanie umieszczonych w jednym wierszu, każda grupa dodatkowych kolumn zostanie zawinięta jako jedna jednostka w nowy wiersz.
• Klasy siatki mają zastosowanie do urządzeń o szerokości ekranu większej lub równej rozmiarom punktów przerwania i zastępują klasy siatki przeznaczone dla mniejszych urządzeń. Dlatego np. Zastosowanie dowolnej .col-md-*klasy do elementu wpłynie nie tylko na jego stylizację na średnich urządzeniach, ale także na dużych urządzeniach, jeśli .col-lg-*klasa nie jest obecna.

Możliwym rozwiązaniem tego problemu jest zdefiniowanie własnej klasy CSS o żądanej szerokości , powiedzmy, że .col-half{width:XXXem !important}następnie dodaj tę klasę do wybranych elementów wraz z oryginalnymi klasami Bootstrap CSS.

Bootstrap 4 używa flex-box i możesz tworzyć własne definicje kolumn

Jest to blisko 1,5, dostosuj do własnych potrzeb.

.col-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

Utwórz nowe klasy, aby nadpisać szerokość. Zobacz działający kod jFiddle .

<div class="row">
  <div class="col-xs-1 col-xs-1-5">
    <div class="box">
      box 1
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 2
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 3
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 4
    </div>
  </div>
</div>

.col-xs-1-5 {
  width: 12.49995%;
}
.col-xs-3-5 {
  width: 29.16655%;
}
.box {
  border: 1px solid #000;
  text-align: center;
}

Jak inni wspomnieli w Bootstrap 3, możesz użyć technik zagnieżdżania / osadzania.

Jednak coraz bardziej oczywiste staje się teraz korzystanie z całkiem niesamowitej funkcji z Bootstrap 4. po prostu masz możliwość użycia col-{breakpoint}-autoklas (np. col-md-auto), aby automatycznie dopasować rozmiar kolumn na podstawie naturalnej szerokości ich zawartości. sprawdź to na przykład

Zgodnie z odpowiedzią Rexa Blooma napisałem pomocnika bootstrap:

//8,33333333% col-1

.extra-col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-0-5 {
  @extend .extra-col;
  flex: 0 0 4.16666667%;
  max-width: 4.16666667%;
}

.col-1-5 {
  @extend .extra-col;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-2-5 {
  @extend .extra-col;
  flex: 0 0 20.833333325%;
  max-width: 20.833333325%;
}

.col-3-5 {
  @extend .extra-col;
  flex: 0 0 29.166666655%;
  max-width: 29.166666655%;
}

.col-4-5 {
  @extend .extra-col;
  flex: 0 0 37.499999985%;
  max-width: 37.499999985%;
}

.col-5-5 {
  @extend .extra-col;
  flex: 0 0 45.833333315%;
  max-width: 45.833333315%;
}

.col-6-5 {
  @extend .extra-col;
  flex: 0 0 54.166666645%;
  max-width: 54.166666645%;
}

.col-7-5 {
  @extend .extra-col;
  flex: 0 0 62.499999975%;
  max-width: 62.499999975%;
}

.col-8-5 {
  @extend .extra-col;
  flex: 0 0 70.833333305%;
  max-width: 70.833333305%;
}

.col-9-5 {
  @extend .extra-col;
  flex: 0 0 79.166666635%;
  max-width: 79.166666635%;
}

.col-10-5 {
  @extend .extra-col;
  flex: 0 0 87.499999965%;
  max-width: 87.499999965%;
}

.col-11-5 {
  @extend .extra-col;
  flex: 0 0 95.8333333%;
  max-width: 95.8333333%;
}

Bootstrap ma przesunięcia kolumn, więc jeśli chcesz mieć kolumny o równej szerokości bez określania rozmiaru, użyj tego.

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Sprawdź również ten link https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints

To nie jest standard Bootstrap, aby dać col-md-1.5 i nie możesz edytować pliku bootstrap.min.css, ponieważ nie jest to właściwy sposób. możesz tworzyć w ten sposób http://www.bootply.com/125259

możesz użyć tego kodu wewnątrz col-md-3, col-md-9

.col-side-right{
  flex: 0 0 20% !important;
  max-width: 20%;
}

.col-side-left{
  flex: 0 0 80%;
  max-width: 80%;
}

To pytanie jest dość stare, ale zrobiłem to w ten sposób (w TYPO3).

Po pierwsze, stworzyłem własną dostępną klasę css, którą mogę ręcznie wybrać dla każdego elementu treści.

Następnie utworzyłem zewnętrzny element trzech kolumn z 11 kolumnami (1 - 9 - 1), w końcu zmodyfikowałem szerokość pierwszej i trzeciej kolumny za pomocą CSS na 12,499999995%.