Konteyner sıvısı ve .container

3.1 indirildi ve dokümanlarda bulundu ...

Senin en dışta değiştirerek tam genişlikli düzeni içine herhangi bir sabit genişlikli ızgara düzeni çevirin .containeriçin .container-fluid.

Baktığında bootstrap.css, şunlar anlaşılmaktadır .container-fluidaynıdır .container. Her ikisi de aynı CSS'ye sahiptir ve her örneği .container-fluideşleştirilir .containerve tüm sütun sınıfları yüzde olarak belirtilir.

Örneklerle dolaşırken hiçbir şey göremedim, çünkü her şey akıcı görünüyordu.

Bootstrap'ta yeni olduğum için, bir şey eksik olduğumu varsayıyorum. Bir dakika bir dakika alıp beni aydınlatabilir mi?

Hızlı sürüm: .container önyüklemedeki her ekran boyutu için bir sabit genişliğe sahiptir (xs, sm, md, lg); .container-fluidkullanılabilir genişliği doldurmak için genişler.

Bu CSS satırları arasındaki containerve container-fluidonlardan gelen fark :

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Web sayfasının görüntülendiği görünümün genişliğine bağlı olarak, containersınıf div'a belirli bir sabit genişlik verir. Bu çizgiler herhangi bir biçimde mevcut değildir container-fluid, bu nedenle görünüm alanı genişliği her değiştiğinde genişliği değişir.

Örneğin, tarayıcı pencerenizin 1000 piksel genişliğinde olduğunu varsayalım. Minimum genişliği 992 piksel olduğu için .container, öğeniz 970 piksel genişliğe sahip olacaktır. Daha sonra tarayıcı pencerenizi yavaşça genişletirsiniz. Aramalarınızdan genişliği .containersen 1200px gelinceye kadar değişmeyecektir, aynı tarihte geniş 1170px atlayacaktır ve daha büyük herhangi bir tarayıcı genişlikleri için bu şekilde kalmak.

Sizin .container-fluidtarayıcı genişliğine hatta en küçük değişiklik yaptıkça eleman, diğer taraftan, sürekli yeniden boyutlandırılır.

Sanırım bir containervs'nin container-fluidızgaraya yanıt veren ve yanıt vermeyen arasındaki fark olduğunu söylüyorsunuz . Bu doğru değil ... ne diyor genişlik sabit değil ... tam genişliği!

Bunu açıklamak zor, bu yüzden örneklere bakalım

Birinci örnek

container-fluid:

http://www.bootply.com/119981

Yani konteynerin tüm ekranı nasıl kapladığını görüyorsunuz ... bu bir container-fluid.

Şimdi diğerine normal bir şekilde bakalım containerve önizlemenin kenarlarını izleyelim

İkinci örnek

container

http://www.bootply.com/119982

Şimdi örnekteki beyaz boşluğu görüyor musunuz? Sabit genişliği olduğu için container! Her iki örneği de iki farklı sekmede açmak ve ileri geri gitmek daha mantıklı olabilir.

DÜZENLE

Daha da iyisi, her iki kapta da aynı anda bir örnek! Şimdi gerçekten farkı anlayabilirsiniz!

http://www.bootply.com/119983

Umarım bu biraz açıklığa kavuşmuştur!

Her ikisi de .containerve .container-fluidduyarlı (yani ekran genişliğine göre düzeni değiştirirler), ancak farklı şekillerde (biliyorum, adlandırma bu şekilde ses çıkarmıyor).

Kısa cevap:

.container gergin / dalgalı yeniden boyutlandırma ve

.container-fluid genişliğinde sürekli / ince boyutlandırma:% 100.

İşlevsel açıdan:

.container-fluidpencerenizin / tarayıcınızın genişliğini herhangi bir miktarda değiştirdiğinizde sürekli olarak yeniden boyutlandırılır ve nasıl yapılacağı .containergibi yanlarda fazladan boş alan bırakmaz. (Bu nedenle adlandırma: "dijital", "ayrık", "yığınlanmış" veya "niceliklendirilmiş" yerine "akışkan").

.containerbelirli genişliklerde parçalar halinde yeniden boyutlandırılır. Başka bir deyişle, farklı özel genişlikteki "sabit" genişlikler farklı ekran genişliği aralıkları olacaktır.

Anlambilim: "sabit genişlik"

Adlandırma karışıklığının nasıl ortaya çıkabileceğini görebilirsiniz. Teknik olarak, .container"sabit genişlik" diyebiliriz , ancak yalnızca her bir parçalı genişlikte yeniden boyutlandırılmaması açısından sabittir. Aslında her zaman belirli bir piksel genişliğinde kaldığı için "sabit" değildir, çünkü gerçekte boyutu değiştirebilir.

Temel bir bakış açısından:

.container-fluidCSS özelliğine sahiptir width: 100%;, bu nedenle her ekran genişliği ayrıntısında sürekli olarak yeniden ayarlar.

.container-fluid {
  width: 100%;
}

.container"genişlik = 800 piksel" (veya em, rem vb.), farklı ekran genişliklerinde belirli bir piksel genişliği değeri gibi bir şeye sahiptir. Bu, elbette, ekran genişliği bir ekran genişliği eşiğini geçtiğinde eleman genişliğinin aniden farklı bir genişliğe atlamasına neden olan şeydir. Ve bu eşik, ekran genişliği aralıkları gibi farklı koşullar için farklı stiller uygulamanıza izin veren CSS3 medya sorguları tarafından yönetilir.

@media screen and (max-width: 400px){
  .container {
    width: 123px;
  }
}
@media screen and (min-width: 401px) and (max-width: 800px){

  .container {
    width: 456px;
  }
}
@media screen and (min-width: 801px){
  .container {
    width: 789px;
  }
}

ötesinde

Sabit genişlikli .containeröğeleri, yalnızca öğeler değil, medya sorguları aracılığıyla da duyarlı hale getirebilirsiniz , çünkü medya sorguları .containerarka planda bootstrap tarafından tam olarak nasıl uygulanır (bkz. JKillian'ın kod cevabı).

.container-fluidSayfanızın görünüm alanı boyutundaki her küçük farkla şekil değiştirmesini istediğinizde kullanın .

.containerSayfanızın yalnızca "kesme noktası" olarak da bilinen 4 farklı boyuta geçmesini istediğinizde kullanın .

Boyutlarına karşılık gelen kesme noktaları şunlardır:

• Çok Küçük: (Sadece Mobil Çözünürlük)
• Küçük: 768 piksel (Tabletler)
• Orta: 992 piksel (Dizüstü Bilgisayarlar)
• Büyük: 1200 piksel (Dizüstü / Masaüstü Bilgisayarlar)

Güncelleme 2019

Temel fark , her zaman olduğu gibi containerduyarlı bir şekilde ölçeklendirilmesidir . Bu nedenle kök CSS tanımlarında aynı görünürler, ancak daha fazla bakarsanız bunun medya sorgularına bağlı olduğunu görürsünüz .container-fluidwidth:100%.container

Bootstrap 4

container5 genişlikleri vardır ...

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Önyükleme 3

container4 boyutları vardır. xsEkranlarda tam genişlik ve daha sonra genişliği aşağıdaki medya sorgularına göre değişir.

    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    @media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
    }

konteyner-konteyner-akışkan demosu

.containermaksimum genişlik piksel değerine sahipken .container-fluidmaksimum genişlik% 100'dür.

.container-fluid pencerenizin / tarayıcınızın genişliğini herhangi bir miktarda değiştirdikçe sürekli olarak yeniden boyutlandırılır.

.container medya sorguları tarafından kontrol edilen bazı belirli genişliklerde parçalar halinde yeniden boyutlandırılır (piksel değerleri belirtildiği için teknik olarak "sabit genişlik" diyebiliriz, ancak orada durursanız, insanlar boyutu değiştiremeyeceği izlenimini alabilir - yani yanıt vermeyebilir .)

Ekran perspektifinden bakıldığında .container, kullanıcıların gördükleri üzerinde daha fazla kontrol sahibi olursunuz ve boyutlar, ızgara boyutları ile aynı. örneğin .col-xs, .col-sm, .col, ve.col-lg .

Bunun anlamı, 4 farklı boyuta sahip bir ekran üzerinde test yaparsanız kullanıcı testi yaparken, tüm doğrulamaların ekranda görüntülendiğini gösterir.

Kullanırken .container-fluideninde ekrana genişliği görüntü alanına ilişkilidir çünkü varations beklemediğiniz sonuçlar görebilirsiniz çok büyük ekranlar veya nadir ekran genişliklerine sahip çok daha büyük ve kullanıcıları böylece dinamik vardır.

3.1. Konteyner-sıvı ve .container aynı haklısın ve konteyner gibi çalışır ama kaldırırsanız .container-sıvı (tam genişlik) gibi çalışır. "Mobil İlk Yaklaşım" için .container-fluid'i kaldırmışlardı, ancak şimdi 3.3.4'e geri döndü (ve farklı şekilde çalışacaklar)

En son bootstrap'ı almak için lütfen stackoverflow'daki bu yazıyı okuyun, kontrol etmenize yardımcı olacaktır .