Wadah-cairan vs .kontainer


509

Hanya mengunduh 3.1 dan ditemukan di dokumen ...

Ubah tata letak kisi lebar tetap menjadi tata letak lebar penuh dengan mengubah terluar Anda .containermenjadi .container-fluid.

Melihat ke dalam bootstrap.css, tampaknya .container-fluididentik dengan .container. Keduanya memiliki CSS yang sama, dan setiap instance .container-fluiddipasangkan dengan .container, dan semua kelas kolom ditentukan dalam persentase.

Ketika mengutak-atik contoh saya tidak bisa melihat perbedaan, karena semuanya tampak lancar.

Karena saya baru di Bootstrap, saya menganggap saya kehilangan sesuatu. Bisakah seseorang mengambil waktu sebentar dan memberi tahu saya?


4
Saya melihat yang itu. Telah diposting beberapa revs kembali. container-fluid dikeluarkan untuk 3.0, dan ditambahkan kembali untuk 3.1.
FatFingers

1
@Ranveer Jelas bukan duplikat karena ini merujuk ke> BS3 yaitu BS2.3 - Karena pertanyaan itu tidak dijawab, bisakah Anda hapus untuk tidak membingungkan pengguna di masa mendatang
PW Kad

Dari dokumen cairan mencakup lebar seluruh viewport. (Atau apakah itu dari seluruh wadah saat ini atau mengandung unsur?) Dalam hal apapun, mengapa namanya cair? Apakah cairan itu berlawanan dengan wadah non-fluida?
pashute

Jawaban:


704

Versi cepat: .container memiliki satu lebar tetap untuk setiap ukuran layar dalam bootstrap (xs, sm, md, lg); .container-fluidmemperluas untuk mengisi lebar yang tersedia.


Perbedaan antara containerdan container-fluidberasal dari baris-baris CSS ini:

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

Bergantung pada lebar viewport tempat halaman web dilihat, containerkelas memberikan divnya lebar tetap yang spesifik. Garis-garis ini tidak ada dalam bentuk apa pun untuk container-fluid, jadi lebarnya berubah setiap kali lebar viewport berubah.

Jadi misalnya, katakanlah jendela browser Anda memiliki lebar 1000px. Karena lebih besar dari min-lebar 992px, .containerelemen Anda akan memiliki lebar 970px. Anda kemudian perlahan memperlebar jendela browser Anda. Lebar Anda .containertidak akan berubah hingga Anda mencapai 1200px, di mana ia akan melompat ke lebar 1170px dan tetap seperti itu untuk lebar browser yang lebih besar.

.container-fluidElemen Anda , di sisi lain, akan secara konstan mengubah ukuran saat Anda membuat perubahan terkecil pada lebar browser Anda.


@ jkillian Itu artinya jika saya ingin membangun tata letak lebar penuh, saya harus menggunakan .container-fluiddan .containeruntuk lebar kotak, benarkan?
Hung PD

1
@TheHung Tergantung apa yang Anda maksud dengan 'lebar penuh', tapi container-fluidapa yang akan saya katakan dalam kasus Anda sejauh yang saya tahu
JKillian

@JKillian Seperti banyak tema saat ini, mereka selalu memiliki 2 tata letak: Kotak dan tata letak lebar. Semoga Anda bisa mengerti apa yang saya jelaskan. Maaf untuk bahasa Inggris yang buruk.
Hung PD

@JKillian Bagaimana kalau menggunakan .container dan .container-fluid dalam beberapa kasus? Mis .: ( design.davidrozando.com/drew-html-v1.1/… ).
Brightweb

5
@JKillian Jadi mengapa cairan wadah diperlukan?

177

Saya pikir Anda mengatakan bahwa containervs container-fluidadalah perbedaan antara responsif dan non-responsif terhadap grid. Ini tidak benar ... apa yang dikatakan adalah bahwa lebar tidak diperbaiki ... lebar penuh!

Ini sulit untuk dijelaskan, jadi mari kita lihat contoh-contohnya


Contoh satu

container-fluid:

http://www.bootply.com/119981

Jadi Anda lihat bagaimana wadahnya memenuhi seluruh layar ... itu a container-fluid.

Sekarang mari kita lihat yang lain hanya normal containerdan menonton tepi pratinjau

Contoh dua

container

http://www.bootply.com/119982

Sekarang apakah Anda melihat ruang putih dalam contoh? Itu karena lebar tetap container! Mungkin lebih masuk akal untuk membuka kedua contoh di dua tab yang berbeda dan beralih bolak-balik.

EDIT

Lebih baik lagi di sini adalah contoh dengan kedua wadah sekaligus! Sekarang Anda benar-benar dapat membedakannya!

http://www.bootply.com/119983

Saya harap ini membantu sedikit memperjelas!


contoh dengan kedua jenis wadah memiliki item yang keduanya berubah lebar.
ahnbizcad

6
Bahkan mengetahui apa perbedaannya, saya menemukan contoh "keduanya" membingungkan karena bayangannya. Saya bercabang kode Anda untuk membuat apa yang mungkin menjadi contoh yang lebih jelas untuk beberapa: bootply.com/119983 (Juga, .row-fluid tidak diperlukan dalam Bootstrap 3. Gunakan saja .row apakah wadah Anda cair atau tidak.)
Carl Bussema

Carl, tautan Anda ke contoh yang sama seperti aslinya. Jika Anda masih memiliki versi bercabang, dapatkah Anda memposting tautannya?
Mike T

6
Berikut adalah contoh tautan fork yang baik , jika ada orang lain yang mengalami hal ini di masa depan.
Mike Collins

Terima kasih kepada Mike, contoh lainnya mereka terlihat sama persis di browser saya.
eric

169

Keduanya .containerdan .container-fluidresponsif (yaitu mereka mengubah tata letak berdasarkan lebar layar), tetapi dengan cara yang berbeda (saya tahu, penamaan tidak membuatnya terdengar seperti itu).

Jawaban singkat:

.container adalah ukuran gelisah / berombak, dan

.container-fluid adalah ukuran kontinu / fine lebar: 100%.

Dari perspektif fungsionalitas:

.container-fluidterus-menerus mengubah ukuran ketika Anda mengubah lebar jendela / browser Anda dengan jumlah berapapun, tidak meninggalkan ruang kosong tambahan di sisi, tidak seperti bagaimana .containermelakukannya. (Oleh karena itu penamaan: "fluid" sebagai kebalikan dari "digital", "discrete", "chunked", atau "quantized").

.containermengubah ukuran dalam potongan pada beberapa lebar tertentu. Dengan kata lain, itu akan berbeda spesifik alias "tetap" lebar rentang layar yang berbeda.

Semantik: "lebar tetap"

Anda dapat melihat bagaimana kebingungan penamaan dapat muncul. Secara teknis, kita dapat mengatakan .containeradalah "lebar tetap", tetapi itu tetap hanya dalam arti bahwa itu tidak mengubah ukuran pada setiap lebar granular. Ini sebenarnya tidak "diperbaiki" dalam arti bahwa ia selalu berada pada lebar piksel tertentu, karena itu sebenarnya dapat mengubah ukuran.

Dari perspektif mendasar:

.container-fluidmemiliki properti CSS width: 100%;, sehingga terus-menerus menyesuaikan pada setiap rincian lebar layar.

.container-fluid {
  width: 100%;
}

.containermemiliki sesuatu seperti "width = 800px" (atau em, rem dll.), nilai lebar piksel tertentu pada lebar layar yang berbeda. Ini tentu saja yang menyebabkan lebar elemen tiba-tiba melompat ke lebar berbeda ketika lebar layar melewati ambang lebar layar. Dan ambang itu diatur oleh kueri media CSS3, yang memungkinkan Anda untuk menerapkan gaya yang berbeda untuk kondisi yang berbeda, seperti rentang lebar layar.

@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;
  }
}

Luar

Anda dapat membuat elemen lebar tetap apa pun responsif melalui kueri media, bukan hanya .containerelemen, karena kueri media persis seperti .containeryang diterapkan oleh bootstrap di latar belakang (lihat jawaban JKillian untuk kode).


1
bukankah perilaku yang lebih akurat .containeradalah Adaptive dan bukan Responsif?
ayjay

@ayjay Anda mengemukakan poin yang bagus. Memiliki istilah untuk membedakan pengubahan ukuran terus-menerus vs pengubahan ukuran akan berguna.
ahnbizcad

1
@ayjay Adaptive mendeteksi tipe perangkat yang digunakan klien, dan menampilkan hal-hal di sisi server. Responsif tidak peduli apa jenis perangkat kliennya; hanya peduli tentang lebarnya (karena pertanyaan media). Dengan demikian, responsif diberikan sisi klien (css, javascript). lihat huffingtonpost.com/garrett-goodman/… dan amberweinberg.com/is-it-adaptive-atau- responsif- web - design IMO responsif jauh lebih mudah untuk dipertahankan dan dibangun daripada memiliki versi situs Anda yang sepenuhnya berbeda untuk perangkat yang berbeda. Tetapi CSS Anda harus memperhitungkan semua browser.
ahnbizcad

@ Jay Melihat kembali pertanyaan semantik ini adaptif vs responsif ... karena adaptif berarti mendeteksi perangkat, dan sesuai dengan itu html / css / js sesuai ... mungkin saja bahwa html / css / js dapat mengandung gaya css dengan lebar: 100% ;. dan itu bisa untuk setiap perangkat. Dalam kasus seperti itu, itu semua adaptif, tetapi masih mengubah ukuran terus menerus daripada tiba-tiba dalam potongan ... Dengan demikian tidak semantik benar untuk menyebutnya adaptif vs responsif
ahnbizcad

24

Gunakan .container-fluidketika Anda ingin halaman Anda berubah bentuk dengan setiap perbedaan kecil dalam ukuran viewport-nya.

Gunakan .containersaat Anda ingin halaman Anda berubah bentuk menjadi hanya 4 jenis ukuran , yang juga dikenal sebagai "breakpoints".

Breakpoint yang sesuai dengan ukurannya adalah:

  • Ekstra Kecil: (Hanya Resolusi Seluler)
  • Kecil: 768px (Tablet)
  • Sedang: 992px (Laptop)
  • Besar: 1200px (Laptop / Desktop)

11

Diperbarui 2019

Perbedaan mendasar adalah bahwa containertimbangan responsif, sementara container-fluidselalu width:100%. Oleh karena itu dalam definisi CSS root, mereka tampak sama, tetapi jika Anda melihat lebih jauh Anda akan melihat bahwa .containeritu terikat dengan pertanyaan media.

Bootstrap 4

The containermemiliki 5 lebar ...

.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;
  }
}

Bootstrap 3

The containermemiliki 4 ukuran. Lebar penuh pada xslayar, dan lebarnya bervariasi berdasarkan kueri media berikut ..

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

wadah vs wadah-cairan demo


Ini tidak ada hubungannya dengan pertanyaan. Info bagus tapi tidak relevan di sini.
BeNice

Zim dia bertanya apa PERBEDAAN antara .container-fluiddan .container. Itulah info yang saya cari. Info Anda menarik tetapi, ketika saya datang mencari jawabannya benar-benar membingungkan saya selama beberapa menit. Jika sudah terdaftar SETELAH jawaban yang menjawab pertanyaan itu akan bagus tetapi SO sepertinya tidak membiarkan kami menyarankan pesanan kami sendiri. Dan membaca komentar asli saya, saya tidak sejelas mungkin. Anyhoo terima kasih atas informasinya.
BeNice

Singkatnya, .containermengubah lebar menurut kueri media dan .container-fluidmengubah lebar secara waktu nyata (menurut lebar tampilan-port)
Hassan Tareq

6

.containermemiliki nilai piksel lebar maks, sedangkan .container-fluidmaks-lebar 100%.

.container-fluid terus-menerus mengubah ukuran saat Anda mengubah lebar jendela / browser Anda dengan jumlah berapa pun.

.container mengubah ukuran dalam potongan pada beberapa lebar tertentu, dikendalikan oleh permintaan media (secara teknis kita dapat mengatakan itu "lebar tetap" karena nilai piksel ditentukan, tetapi jika Anda berhenti di sana, orang mungkin mendapatkan kesan bahwa itu tidak dapat mengubah ukuran - yaitu tidak responsif .)


Sepertinya cairan wadah secara keseluruhan lebih baik? Lebih responsif terhadap ponsel yang merupakan hal besar akhir-akhir ini ...

5

Dari perspektif tampilan .containermemberi Anda lebih banyak kontrol atas apa yang dilihat pengguna, dan membuatnya lebih mudah untuk melihat apa yang akan dilihat pengguna karena Anda hanya memiliki 4 variasi tampilan (5 dalam hal bootstrap 5) karena ukurannya berhubungan dengan sama dengan ukuran kisi. misalnya.col-xs , .col-sm, .col, dan .col-lg.

Artinya, ketika Anda melakukan pengujian pengguna jika Anda menguji pada layar dengan 4 ukuran berbeda Anda melihat semua verifikasi di layar.

Ketika menggunakan .container-fluidkarena witdh terkait dengan lebar viewport tampilan dinamis, sehingga varations jauh lebih besar dan pengguna dengan layar yang sangat besar atau lebar layar yang tidak biasa dapat melihat hasil yang tidak Anda harapkan.


0

Anda benar di 3.1 .container-fluid dan .container sama dan berfungsi seperti wadah tetapi jika Anda menghapusnya berfungsi seperti .container-fluid (lebar penuh). Mereka telah menghapus .container-fluid untuk "Pendekatan Pertama Seluler", tetapi sekarang kembali dalam 3.3.4 (dan mereka akan bekerja secara berbeda)

Untuk mendapatkan bootstrap terbaru silakan baca posting ini di stackoverflow, ini akan membantu memeriksanya .

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.