100% lebar template Twitter Bootstrap 3

135

Saya seorang pemula bootstrap dan saya memiliki template lebar 100% yang ingin saya kodekan dengan bootstrap. Kolom pertama dimulai dari sudut kiri dan saya memiliki peta Google membentang ke paling kanan. Saya pikir saya bisa melakukan ini dengan container-fluidkelas, tetapi sepertinya itu tidak tersedia lagi. Saya tidak tahu bagaimana mencapai tata letak itu dengan bootstrap 3. Saya menggunakan template Geometry PSD dari themeforest, tautan di sini jika Anda ingin melihat tata letak: http://themeforest.net/item/geometry-design-for- geolokasi-jaringan-sosialr / 4752268

html css twitter-bootstrap layout twitter-bootstrap-3 Samia Ruponti
sumber
5
Anda dapat menyesuaikan Bootstrap untuk menggunakan @container-*lebar 100%. Juga, .container-fluidakan kembali di 3.1.0. :)

Jawaban:

247

Untuk Bootstrap 3, Anda perlu menggunakan pembungkus khusus dan mengatur lebarnya menjadi 100%.

.container-full {
  margin: 0 auto;
  width: 100%;
}

Berikut adalah contoh kerja di Bootply

Jika Anda memilih untuk tidak menambahkan kelas khusus, Anda dapat mencapai tata letak yang sangat luas (bukan 100%) dengan menggabungkan semuanya di dalam col-lg-12( demo tata letak lebar )

Pembaruan untuk Bootstrap 3.1

The container-fluidkelas telah kembali di Bootstrap 3.1, jadi ini dapat digunakan untuk membuat tata letak lebar penuh (tidak ada CSS tambahan yang diperlukan) ..

Demo Bootstrap 3.1

Zim
sumber
13
Kamu harus berhati hati. Baris ini memiliki margin kiri dan kanan -15px. Itu dikompensasi oleh wadah yang memiliki bantalan 15px. Cara terbaik adalah menambahkan bantalan itu ke wadah Anda penuh dan kemudian menggunakan baris dan kolom untuk membuat kisi Anda.
rootman
6
@rootman Saya menggunakan class = "container container-full" dan tampaknya berfungsi.
Kenmore
Gunakan wadah-cairan bersama dengan kolom-md-12 untuk mendapatkan baris ukuran penuh. Akan ada selokan (standar 15px di setiap sisi) yang perlu dihapus. Cara termudah adalah dengan menghapusnya secara manual, dengan menggunakan custom css berikut: #SomeId div {padding-left: 0; padding-right: 0; }
Martin
2
Terima kasih atas tipnya ... cairan wadah bekerja dengan baik untuk saya, tidak perlu perubahan lain. Gutter tidak menimbulkan masalah karena pengaturan warna latar belakang kelas yang ditampung akan merender warna ke tepi, seperti yang diinginkan, sementara teks dan elemen lainnya diimbangi dengan baik sedikit, juga sesuai keinginan.
Krishna Gupta
30

Ini adalah struktur dasar lengkap untuk tata letak lebar 100% di Bootstrap v3.0.0 . Anda tidak harus membungkus Anda <div class="row">dengan containerkelas. containerKelas penyebab akan mengambil banyak margin dan ini tidak akan memberi Anda tata letak layar penuh (lebar 100%) di mana bootstrap telah menghapus kelas container-fluid dari versi mobile-first v3.0.0 mereka.

Jadi mulailah menulis <div class="row">tanpa kelas kontainer dan Anda siap menggunakan tata letak lebar 100%.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
  <script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>
</head>
<body>
    <div class="row">
        <div class="col-md-3 red">Test content</div>
        <div class="col-md-9 green">Another Content</div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Untuk melihat hasilnya sendiri saya telah membuat bootply. Lihat output langsung di sana. http://bootply.com/82136 Dan bootstrap dasar lengkap 3 tata letak lebar 100% saya telah membuat intinya. kamu bisa menggunakan itu. Dapatkan intinya dari sini

Balas saya jika Anda membutuhkan bantuan lebih lanjut. Terima kasih.

Shaharia Azam
sumber
20
Solusi ini menambahkan scrollbar horizontal di FF karena margin di .row. Dokumen bootstrap mengatakan bahwa .row harus selalu digunakan di dalam penampung karena ini - Orang yang ingin membuat tata letak yang sepenuhnya dapat diubah (artinya situs Anda membentang di seluruh lebar viewport) harus membungkus konten kisi mereka dalam elemen penampung dengan padding: 0 15px; untuk mengimbangi margin: 0 -15px; digunakan pada .rows. - getbootstrap.com/css/#grid-intro
nealio82
5
Nealio benar. Anda tetap harus menggunakan wadah. Saya membungkus baris lebar penuh saya dalam .container-full dengan deklarasi CSS ini:.container-full { padding: 0 15px; }
tbeseda
3
Ini tampaknya bug di bootstrap. Saya menyelesaikannya dengan menambahkan yang berikut ini ke elemen kontainer tempat baris layar penuh Anda ditempatkan: padding: 0 15px; margin kiri: 0px; margin-right: 0px;
Jorre
2
Bukankah semua .rowharus terkandung dalam a .container?
skube
2
Erik Flowers menulis artikel hebat tentang hubungan kontainer / baris, saya sarankan untuk membacanya!
idleberg
27

Menggunakan Bootstrap 3.3.5 dan .container-fluid, inilah cara saya mendapatkan lebar penuh tanpa talang atau pengguliran horizontal di ponsel. Perhatikan bahwa .container-fluiddiperkenalkan kembali di 3.1.

Lebar penuh di ponsel / tablet, 1/4 layar di desktop

<div class="container-fluid"> <!-- Adds 15px left/right padding --> 
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
      <!-- Full-width for mobile -->
      <!-- 1/4 screen width for desktop -->
    </div>
  </div>
</div>

Lebar penuh di semua resolusi (seluler, tabel, desktop)

<div class="container-fluid"> <!-- Adds 15px left/right padding -->
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div>
      <!-- Full-width content -->
    </div>
  </div>
</div>
angularsen
sumber
20

Anda benar menggunakan div.container-fluiddan Anda juga membutuhkan seorang div.rowanak. Kemudian, konten harus ditempatkan di dalam tanpa kolom kisi. Jika Anda melihat dokumen, Anda dapat menemukan teks ini:

  • Baris harus ditempatkan dalam .container (lebar tetap) atau .container-fluid (lebar penuh) untuk perataan dan bantalan yang tepat.
  • Gunakan baris untuk membuat kelompok kolom horizontal.

Tidak menggunakan kolom kisi tidak apa-apa seperti yang dinyatakan di sini:

  • Konten harus ditempatkan dalam kolom, dan hanya kolom yang boleh merupakan turunan langsung dari baris.

Dan melihat contoh ini , Anda dapat membaca teks ini:

Lebar penuh, kolom tunggal : Kelas petak tidak diperlukan untuk elemen lebar penuh.

Berikut adalah contoh langsung yang menunjukkan beberapa elemen menggunakan tata letak yang benar. Dengan cara ini Anda tidak memerlukan CSS atau retasan khusus.

gerardnll
sumber
5

Di BOOTSTRAP 4 Anda dapat menggunakan

<div class="row m-0">
my fullwidth div
</div>

... jika Anda hanya menggunakan .row tanpa .m-0 sebagai div tingkat atas, Anda akan mendapatkan margin yang tidak diinginkan, yang membuat halaman lebih lebar dari jendela browser dan menyebabkan scrollbar horizontal.

Felix
sumber