it-swarm-eu.dev

Jak používat bootstrap s 16 nebo 24 sloupci

Potřebuji nějakou pomoc nastavení bootstrap 2.0.4 být 16 nebo 24 sloupec namísto výchozích 12 sloupců nemohu pochopit, co dělám špatně jsem se pokusil přizpůsobit možnost na webu bootstrap a snažil jsem se změnit proměnné mřížky v proměnných .less soubor a recompile bootstrap.less pomocí Crunch, ale pro oba pokusy mám stále stejný výsledek. to je stále 12 sloupců !!! když se pokusím nastavit div být span12 to ještě trvá celou obrazovku?

Může mě někdo vést k tomu, co dělám špatně, nebo pokud někdo může vygenerovat 16 a 24 sloupcové verze a poslat je mi, že by to bylo perfektní

22
Joseph Girgis

Tato metoda je pro starší verzi Bootstrapu - verze 2.3.1

Kliknutím na tento odkaz můžete přizpůsobit bootstrap: http://Twitter.github.com/bootstrap/customize.html

Najdete takové příklady. Změňte parametry podle svých potřeb.

16 Grid system with Gutter
@gridColumns: 16
@gridColumnWidth: 45px
@gridGutterWidth: 15px
@gridColumnWidth1200: 52.5px
@gridGutterWidth1200: 22.5px
@gridColumnWidth768: 31.5px
@gridGutterWidth768: 15px

16 Grid system without Gutter
@gridColumns: 16
@gridColumnWidth: 60px
@gridGutterWidth: 0px
@gridColumnWidth1200: 75px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 46.5px
@gridGutterWidth768: 0px

24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px

24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px
19
Hasan Atbinici

Jednoduchý dost na změnu v méně - http://Twitter.github.com/bootstrap/scaffolding.html#gridCustomization

Budete chtít změnit proměnné tam, kde chcete - 

např.

@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 10px

Pokud používáte tekutinovou mřížku, budete chtít tyto proměnné měnit také proporcionálně, jinak bude span12 stále zabírat 100% šířky a rozpětí 24 zabere 200%

@fluidGridColumnWidth
@fluidGridGutterWidth

Jak je uvedeno:

Jak přizpůsobit

Změna mřížky znamená změnu tří proměnných @ grid * a rekompilaci Bootstrap. Změňte proměnné mřížky v proměnných.less a použijte jeden ze čtyř způsobů, které jsou dokumentovány k opětovné kompilaci. Pokud přidáváte více sloupců, nezapomeňte přidat CSS pro ty v mřížce.

Můžete změnit proměnné a stáhnout nové css přímo zde: http://Twitter.github.com/bootstrap/download.html#variables

Zde je příklad, který by měl fungovat pro 16 sloupců (nebyly testovány, dejte mi vědět, jak to funguje): https://s3.amazonaws.com/intenex/bootstrap16columns.Zip

11
Intenex

Edit: Vytvoření mřížky s vlastním počtem sloupců bylo obnoveno a může být provedeno na stránce Bootstrap customization page .

Z neznámých důvodů vám nejnovější verze programu Bootstrap (3.0.0/1) neumožňuje vytvořit mřížku jinou než 12 sloupců, což je velká škoda. 

To, co můžeme v současné době dělat a které zase umožní vytvářet více přizpůsobených balíčků bootstrapů, je nastavení vlastního přizpůsobovacího programu Bootstrap.

Edit: Zkoušel jsem to. Instalace všech závislostí probíhala poměrně hladce, zatímco se držely pokynů na stránce Dokumenty GitHub.

Vzorek vytvořen 24 mřížek sloupce

Editor required inserting some code along with jsfiddle link. There's no point in pasting anything though.
4
Maciej Gurban

16 sloupců

960px

45px * 16 = 720 sloupec

15px * 16 = 240 Gutter

1200px

53px * 16 = 848 sloupec

22px * 16 = 352 okap

768px

33px * 16 = 528 sloupec

15px * 16 = 240 Gutter

3
User

Aktualizováno 2018

Revizi této otázky pro nejnovější Bootstrap 4. Nyní, když je Bootstrap 4 flexbox a obsahuje sloupce automatického rozvržení , je snadné vytvořit rozvržení s libovolným počtem n sloupců .. .

16 sloupců

<div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                ... to 16
            </div>
</div>

24 sloupců

<div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                ... to 24
            </div>
</div>

Demo: https://www.codeply.com/go/4sQGt2qKyr


Viz také: N počet sloupců v Bootstrapu 4

1
Zim

Atribut width můžete přepsat procentem takto:

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

Dokonce zachová citlivé schopnosti.

0
Chieu Nhat Nang

Sada 24 sloupců:

960
35px sloupec
5px okap

1200
40px sloupec
10px Gutter

768
29px sloupec
3px Gutter

0
User

Zde je rychlý a snadný způsob, jak jsem zjistil (a), že lze vnořit 16 sloupců pomocí vnoření ...

.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
<div class="row">
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
</div>
<!-- row -->

0
nalcus

Pro svůj projekt používám sloupce Grid 30 (k dispozici je i Grid 24 a 100)

https://github.com/zirafa/bootstrap-grid-only

v závislosti na požadavcích může být vyžadováno nějaké přizpůsobení

0
Arun Prasad E S