Wadah-cairan vs .kontainer

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?

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.

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!

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).

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)

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

.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 .)

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.

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 .