Birden çok ve / veya iç içe geçmiş Bootstrap kapsayıcıları?

84

Benim anlayış tüm Bootstrap tarzı elemanları içinde bulunan diğer gerektiğidir <div class="container">elemanı. Ancak bazen birden çok "kapsayıcı" nın olduğu Bootstrap örnekleri görüyorum:

<div class="container">
    <!-- Blah, GUI stuff, blah -->
</div>

...

<div class="container">
    <!-- Blah, more GUI stuff, blah -->
</div>

Sorularım:

Birden çok "kapsayıcı div" içeren tek bir HTML sayfasına ne zaman ihtiyacınız olur? Tüm vücudu tek bir büyük "kapsayıcı div" içine koymaktan farklı olarak bunun faydası nedir?
Hiç "kapsayıcı div'leri" diğerlerinin içine yerleştirmek ister miydiniz? Ne zaman / neden?

css twitter-bootstrap

— smeeb
kaynak

1

Tam genişlikte bir atlıkarınca kullanıyorsanız, altyazılar için kullanılan kaplara sahiptir, bu nedenle bir kap içinde olmamalıdır. Bu nedenle, üstünde bir kap ve altında bir kap olabilir.

— Aibrean

1

@Christina, belgelerin kapsayıcıları iç içe geçirmediğinizi söylediği için doğru olsa da, bazen kullanılır ve yararlıdır. Yuvalama hakkında ek bilgi için stackoverflow.com/questions/29660034/… sayfasına bakın .

— gidmanma

80

Sayfanın bazı bölümleri tam görüntü alanı genişliğini kapsayacak ve diğerleri olmayacaktır. Bazı arka planlar tam genişlikte olacak, ancak içerik olmayacak.

Bunun bir örneği, görünüm alanının tam genişliği olan bir arka plan görüntüsüne veya rengine sahip, ancak bunun içindeki içerik, formlar veya her neyse, .containerverilen herhangi bir görünüm genişliğini aşmayan bir özellik alanıdır .
Yuva yapmazsınız .containerveya .container-fluid- belgelere bakmazsınız . Gereksiz.

Dokümanlar: Bootstrap, site içeriğini sarmak ve ızgara sistemimizi barındırmak için bir kapsayıcı öğe gerektirir. Projelerinizde kullanmak için iki konteynerden birini seçebilirsiniz. Dolgu ve daha fazlası nedeniyle, konteynerlerin hiçbirinin iç içe geçemeyeceğini unutmayın [ne .container ve .container-Fluid'in iç içe OLMAYACAĞI anlamına gelmez].

— Christina
kaynak

4

Sık sık bir var .container-fluidana site içinde oturur iken çeşit gezinme çubuğunda veya afiş gibi bir şey için .container.

— DavidG

3

@DavidG Evet, sonra çift dolgunuz var. Dokümanlar: Bootstrap, site içeriğini sarmak ve ızgara sistemimizi barındırmak için bir kapsayıcı öğe gerektirir. Projelerinizde kullanmak için iki konteynerden birini seçebilirsiniz. Dolgu ve daha fazlası nedeniyle, hiçbir kabın iç içe geçemeyeceğini unutmayın. getbootstrap.com/css

— Christina

1

@DavidG. En yakın çocuk bir .row ve sütunlar olmadığı sürece .container-Fluid kullanmıyorum.

— Christina

1

Ben de yapmam. Gezinme çubuğuna sahip bir sıvı kabına sahip olacağımı ve böylece ekranın kenarlarından akmasını kastetmiştim, ardından kap kapatma etiketinden sonra ana içeriğe sahip yeni bir akışkan olmayan kap başlat.

— DavidG

1

Burada yapılması gereken büyük bir ayrım - belki doğrudan iç içe olmamaları gerekir , ancak yuvalanabilirler ve bazı durumlarda yuvalanmaları gerekir . Diyelim ki ana kabın içinde bir satır veya sütun olmayan dolgulu bir panel div var - bu durumda .container-fluidpanelin içindeki satırları / sütunlarımı çevreleyen bir sınıfa ihtiyacım var ; aksi takdirde yatay bir kaydırma çubuğu alırdım (panelin içindeki taşma gizli olarak ayarlanmadıkça - ama bunu istemeyebilirim, içinde çok fazla veri varsa, belki geniş bir tablo varsa bir kaydırma çubuğu istiyorum).

— jbyrd

17

Bazılarının söylediğinin aksine, a'yı a'nın container-fluidiçine yerleştirebilirsiniz container. Resmi bootstrap web sitesinde bir örnek bile var:

http://getbootstrap.com/examples/navbar/

— Azar azar
kaynak

1

Bu bağlantının içeriğinin nihayetinde değişmesi durumunda, örneğin bir containeriç içe yerleştirme içerdiği 3.3 sürümü container-fluid: getbootstrap.com/docs/3.3/examples/navbar

— Ryan

6

4.3 belgelerin Yerleşim bölümünde, https://getbootstrap.com/docs/4.3/layout/overview/#containers , şimdi belirtiyor

Konteynerler iken edebilir iç içe, çoğu düzenleri iç içe geçmiş bir kabı gerektirmez.

Sadece başkalarının dolgu vb. Hakkında söylediklerinin farkında olun.

— Patrick McDonald
kaynak

5

Aslında tamamen tasarımcının ihtiyacına bağlıdır.

Bazen sıranın tam genişliğine ihtiyaç duyarsınız (yani görüntü alanı veya ayrı bir konteyner sınıfı olmadan elde edebileceğiniz bir görünür parça şeridi demek istiyorum)

http://binarytheme.com/demos?theme=bootsrap-landing-page-blue

anlamak için yukarıdaki şablon örneğine bakın

— Ölçek
kaynak

0

Zaman kazanın ve yerel CSS ızgarasında Css ızgarasına geçin .

Önyükleme konteynerlerinin bir sınırlaması vardır, 12 sütun sınırlaması, 10 piksellik doldurma zorluğu ararsanız, kullanıcının makineye indirmesi gereken yere yerel olmayan (CSS yerleşik) ve hepsinden önemlisi sayı işlemeniz gereken dalış.

Tüm bunları göz önünde bulundurarak bir deneyin ve CSS ızgarasına geçin, burada başlamak için iyi bir oyun alanı var.

Şimdi CSS ızgarasının eksilerine gelince, hala IE ile uyumlu değil.

— Feras
kaynak