Pojemnik na płyny w Bootstrap 3

Jak zrobić pojemnik na płyny w bootstrap 3?

W bootstrap 2.3.2 .container-fluid istnieje klasa. Ale teraz w bootstrap 3 brakuje i jest tylko .container klasa. Proszę, pomóż mi.

Author: Mr Lister, 2013-11-05
Source

5 answers

Bootstrap 3.0 przeniesiony na podejście "mobile first". .container jest tak naprawdę tylko tam, gdzie potrzebujesz / chcesz boxy layout. ale jeśli wyłączysz div.container-fluid całkowicie, domyślnie pozostajesz z układem płynnym.

Na przykład, aby mieć dwukolumnowy układ płynu, po prostu użyj: 

<body>
  <header>...</header>
  <div style="padding:0 15px;"><!-- offset row negative padding -->
    <div class="row">
      <div class="col-md-6">50%</div>
      <div class="col-md-6">50%</div>
    </div>
  </div>
  <footer>...</footer>
</body>
 33
Author: Brad Christie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-28 19:02:01

2.x .container-fluid został zastąpiony przez .container w Bootstrap 3.x ( http://getbootstrap.com/getting-started/#migration ), więc .container jest płynna , ale nie jest pełna.

Możesz użyć row jako pojemnika na płyny, ale musisz go trochę dostosować, aby uniknąć poziomego paska przewijania. Fragment dokumentu ( http://getbootstrap.com/css/#grid)..

"ludzie chcący stworzyć w pełni płynny layoutów (czyli Twoja strona rozciąga się na całą szerokość viewport) musi zawijać zawartość siatki w element z wypełnieniem: 0 15px; przesunięcie marginesu: 0-15px; używane na .rzędy."

Więcej o zmianach w 3.x: http://bootply.com/bootstrap-3-migration-guide

Demo: http://bootply.com/91948

Aktualizacja dla Bootstrap 3.1

container-fluid powrócił ponownie w Bootstrap 3.1. Teraz container-fluid można użyć do utworzenia układu o pełnej szerokości: http://www.bootply.com/116382

 21
Author: Zim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-06 21:28:33

To zostało wprowadzone w v3.1.0: http://getbootstrap.com/css/#grid-example-fluid

Commit #62736046 dodano "kontener-płynna zmiana dla kontenerów i układów o pełnej szerokości".

 13
Author: Martin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-13 09:25:19

Po prostu ustawiam następującą regułę CSS, w której każdy wiersz będący potomkiem container-fluid nie będzie miał ujemnego marginesu, który kompensuje system siatki.

.container-fluid > .row {
    margin-left: 0;
}

Przetestuję dalej, aby sprawdzić, czy nie powoduje to żadnych problemów z innymi układami siatki o stałej szerokości.

 4
Author: Bryce Wilson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-20 17:47:28

Są tu dobre odpowiedzi, więc postaram się uniknąć powtarzania się z moimi następującymi punktami na ten temat:

  1. .container-fluid został usunięty w 3.0, ale teraz jest z powrotem w 3.4 (ta informacja jest w odpowiedzi, ale chciałem umieścić ją w odpowiedzi)
  2. Aby pobrać najnowszą wersję przejdź proszę. lub użyj Nuget.
  3. wiersze muszą być umieszczone w obrębie a .kontener (o stałej szerokości) lub .pojemnik-płyn (pełna szerokość) dla prawidłowego wyrównania i wypełnienia.
  4. dla najnowszych informacji o kontenerze proszę idź. tutaj dla Bootstrap CSS
 1
Author: Deep,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-25 16:23:14