Elemen Bootstrap Lebar 100%

96

Saya ingin membuat blok berwarna 100% bergantian. Situasi "ideal" diilustrasikan sebagai keterikatan, serta situasi saat ini.

Setup yang diinginkan:

http://i.imgur.com/aiEMJ.jpg

Saat ini:

http://i.imgur.com/3Sl27.jpg

Ide pertama saya adalah membuat kelas div, memberinya warna latar belakang, dan memberikan lebar 100%.

.block {
    width: 100%;
    background: #fff;
}

Namun, Anda dapat melihat bahwa ini jelas tidak berhasil. Itu terbatas pada area kontainer. Saya mencoba menutup wadah dan itu tidak berhasil.

css  twitter-bootstrap  width 
— pengguna1589214
sumber
Bisakah Anda memasukkan kode yang sedang Anda kerjakan? Tanpa itu, yang bisa saya katakan adalah Anda harus memastikan tag yang mengandung div tidak memiliki set lebar selain 100%
— Michael Peterson
Hei Michael, terima kasih atas tanggapannya. Inilah bagian dari kode yang saya kerjakan: <div class="container"> <div class="row"> <div class="span12"><img src="img/logo.png" width="960px"></center></div> <div class="block">content</div>
— user1589214

Jawaban:

78

The containerkelas sengaja tidak 100% lebar. Ini adalah lebar tetap berbeda tergantung pada lebar area pandang.

Jika Anda ingin bekerja dengan lebar layar penuh, gunakan .container-fluid:

Bootstrap 3:

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

Bootstrap 2:

<body>
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span12"></div>
  </div>
</body>
— Ross Allen
sumber
1
.row membutuhkan .container atau dalam hal ini .container-fluid.
— netAction
1
Jika Anda menggunakan versi lama dari bootstrap stylesheet container-fluidakan menyebabkan bilah gulir horizontal. Untuk memperbaikinya, tambahkan ini ke stylesheet Anda.container-fluid{ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
— Charlie
29

Beginilah cara Anda mencapai pengaturan yang Anda inginkan dengan Bootstrap 3 :

<div class="container-fluid">
    <div class="row"> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    ... your content here ...
                </div>
            </div>
        </div>
    </div>
</div>

Bagian container-fluidtersebut memastikan bahwa Anda dapat mengubah latar belakang dengan lebar penuh. Bagian containertersebut memastikan bahwa konten Anda masih terbungkus dengan lebar tetap.

Pendekatan ini berhasil, tetapi secara pribadi saya tidak suka semua bersarang. Namun, sejauh ini saya belum menemukan solusi yang lebih baik.

— JacobF
sumber
3
Memang terlihat seperti "tidak ada wadah yang dapat bersarang" getbootstrap.com/css/#overview-container , jadi perkirakan ada beberapa masalah di sini (tetapi saya masih akan menggunakan solusi Anda, saya pikir).
— Thibaut Barrère
Perlu dicatat bahwa kelas cairan-kontainer tidak tersedia di bootstrap 3.0 tetapi tersedia di 3.1 dan lebih tinggi
— Dev
29

JAWABAN CEPAT

  1. Gunakan beberapa NOT NESTED .container s
  2. Bungkus mereka .containeryang Anda ingin memiliki latar belakang lebar penuh di adiv
  3. Tambahkan latar belakang CSS ke div pembungkus

Fiddles: Sederhana: https://jsfiddle.net/vLhc35k4/ , Batas kontainer: https://jsfiddle.net/vLhc35k4/1/
HTML:

<div class="container">
  <h2>Section 1</h2>
</div>
<div class="specialBackground">
  <div class="container">
    <h2>Section 2</h2>
  </div>
</div>

CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }

INFO LEBIH LANJUT

JANGAN GUNAKAN KONTAINER NESTED

Banyak orang akan ( salah ) menyarankan, bahwa Anda harus menggunakan wadah bersarang.
Nah, sebaiknya Anda TIDAK .
Mereka tidak perlu disarangkan. (Lihat ke bagian " Penampung " di dokumen)

BAGAIMANA ITU BEKERJA

divadalah elemen blok, yang secara default menjangkau lebar penuh badan dokumen - ada fitur lebar penuh. Ini juga memiliki ketinggian isinya (jika Anda tidak menentukan sebaliknya).

Wadah bootstrap tidak diharuskan menjadi turunan langsung dari suatu tubuh, mereka hanya wadah dengan beberapa padding dan mungkin beberapa lebar tetap variabel lebar layar.

Jika kisi dasar .containermemiliki beberapa lebar tetap, kisi tersebut juga dipusatkan secara otomatis secara horizontal.
Jadi tidak ada bedanya apakah Anda meletakkannya sebagai:

  1. Anak langsung dari suatu tubuh
  2. Anak langsung dari suatu dasar div yaitu anak langsung dari suatu tubuh.

Yang divsaya maksud dengan "dasar" adalah divtidak memiliki CSS yang mengubah batas, padding, dimensi, posisi, atau ukuran kontennya. Benar-benar hanya elemen HTML dengan display: block;CSS dan mungkin latar belakang.
Tetapi tentu saja pengaturan CSS seperti vertikal (tinggi, padding-top, ...) tidak boleh merusak kisi bootstrap :-)

Bootstrap sendiri menggunakan pendekatan yang sama

... Semua di situsnya sendiri dan di dalamnya contoh "JUMBOTRON":
http://getbootstrap.com/examples/jumbotron/

— jave.web
sumber
1
Jawaban ini sangat teliti dan bersikukuh bahwa penampung bersarang di dalam wadah lain adalah 'ide yang sangat buruk' (seperti 'melintasi sungai' buruk di Ghostbusters) dan dia menunjuk ke referensi situs web Bootstrap yang mendukung ini. Menyertakan wadah di dalam div sederhana adalah saran dan fakta bahwa Boostrap menggunakan teknik ini pada contoh Jumbotron mereka memberi tahu saya bahwa jave.web adalah pemenang hari ini!
— Volksman
Contoh jumbotron itu menghapus semua pertanyaan saya.
— Alexander Kim
Terkadang tidak mungkin untuk menutup Container dan membuka Full-with Container baru. Solusi. Dalam Jawaban berikut lebih baik!
— RubbelDeCatc
21

Ada solusi untuk menggunakan vw. Berguna saat Anda tidak dapat membuat wadah fluida baru. Ini, di dalam div 'kontainer' klasik akan berukuran penuh.

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

Setelah ini ada masalah bilah sisi (berkat @Typhlosaurus), diselesaikan dengan fungsi js ini, memanggilnya saat memuat dokumen dan mengubah ukuran:

function full_row_resize(){
    var body_width = $('body').width();
    $('.row-full').css('width', (body_width));
    $('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
    return false;
}
— benedex82
sumber
3
Ini sangat mendekati jawaban ideal yang tidak memerlukan perubahan pada keseluruhan tata letak halaman, dan terkadang sudah cukup, namun ada masalah halus dengan scrollbar. .Row-full akan mengisi seluruh jendela, mengabaikan scrollbar, tidak seperti container-fluid yang akan mengisi seluruh jendela dengan atau tanpa scrollbar tergantung pada buramnya scrollbar.
— Typhlosaurus
Wow. Js melakukan triknya, saya telah mencari solusi selama berjam-jam. Masalah saya adalah bahwa konten dimasukkan dalam cms dan karena itu tidak dapat mengubah html luar. Benar-benar ingin tahu apakah ada solusi tanpa js.
— drooh
6

Jika Anda tidak dapat mengubah tata letak HTML:

.full-width {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">a</div>
    <div class="col-xs-12">b</div>
    <div class="col-xs-12 full-width">c</div>
    <div class="col-xs-12">d</div>
  </div>
</div>

Demo: http://www.bootply.com/tVkNyWJxA6

— Seb33300
sumber
2

Dari pada 

style="width:100%"

coba gunakan 

class="col-xs-12"

itu akan menghemat 1 karakter :)

— Yevgeniy Afanasyev
sumber
Jawaban ini bukanlah yang diminta OP. Ini akan membuat kolom yang merupakan lebar penuh dari .containerdiv luar , tetapi itu tidak sama dengan lebar penuh halaman di browser, yang ditanyakan oleh pertanyaan.
— Hartley Brody
Saya tidak dapat melihat bahwa OP meminta "lebar penuh halaman di browser". Bagaimana Anda memahaminya?
— Yevgeniy Afanasyev
2

Terkadang tidak memungkinkan untuk menutup wadah konten. Solusi yang kami gunakan sedikit berbeda tetapi mencegah overflow karena ukuran scrollbar firefox!

.full-width {
 margin-top: 15px;
 margin-bottom: 15px;
 position: relative;
 width: calc(100vw - 10px);
 margin-left: calc(-50vw + 5px);
 left: 50%;
}

Berikut ini contohnya: https://jsfiddle.net/RubbelDeKatz/wvt9253q

— RubbelDeCatc
sumber
Dengan Bootstrap 4, sejauh ini ini adalah jawaban terbaik. Bersulang!
— Metro Smurf
1

Maaf, harusnya minta css kamu juga. Pada dasarnya, apa yang perlu Anda lihat adalah memberikan div wadah Anda gaya .container { width: 100%; }di css Anda dan kemudian div terlampir akan mewarisi ini selama Anda tidak memberi mereka lebar mereka sendiri. Anda juga kehilangan beberapa tag penutup, dan </center>penutup a <center>tidak pernah terbuka, setidaknya di bagian kode ini. Saya tidak yakin apakah Anda menginginkan gambar dalam div yang sama yang berisi konten Anda atau terpisah, jadi saya membuat dua contoh. Saya mengubah lebar img menjadi 100px hanya karena jsfiddle menawarkan area tampilan yang kecil. Beri tahu saya jika bukan itu yang Anda cari.

konten dan gambar terpisah: http://jsfiddle.net/QvqKS/2/

konten dan gambar dalam div yang sama (img melayang kiri): http://jsfiddle.net/QvqKS/3/

— Michael Peterson
sumber
0

Saya bertanya-tanya mengapa seseorang mencoba untuk "mengganti" lebar wadah, karena tujuannya adalah untuk menyimpan isinya dengan beberapa padding, tetapi saya memiliki situasi yang sama (itulah mengapa saya ingin berbagi solusi saya, meskipun ada jawaban ).

Dalam situasi saya, saya ingin semua konten (dari semua halaman) dirender di dalam wadah, jadi ini adalah bagian kode dari _Layout.cshtml saya:

<div id="body">

    @RenderSection("featured", required: false)

    <section class="content-wrapper main-content clear-fix">
        <div class="container">
            @RenderBody()
        </div>
    </section>
</div>

Di halaman Home Index saya, saya memiliki gambar header latar belakang yang ingin saya isi seluruh lebar layar , jadi solusinya adalah membuat Index.cshtml seperti ini:

@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
    <div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}

<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
    <div class="container">
        <div class="row">
          MORE CONTENT
        </div>
    </div>
</div>

Saya pikir ini lebih baik daripada mencoba membuat solusi, karena bagian dibuat dengan tujuan memungkinkan (atau memaksa) tampilan untuk secara dinamis mengganti beberapa konten dalam tata letak.

— Alisson
sumber
0

Meskipun orang telah menyebutkan bahwa Anda perlu menggunakan .container-fluid dalam kasus ini, tetapi Anda juga harus melepaskan bantalan dari bootstrap.

0

Jawaban berikut tidak sepenuhnya optimal dengan ukuran apa pun, tetapi saya membutuhkan sesuatu yang mempertahankan posisinya di dalam wadah sementara itu meregangkan div bagian dalam sepenuhnya.

https://jsfiddle.net/fah5axm5/

$(function() {
    $(window).on('load resize', ppaFullWidth);

    function ppaFullWidth() {
        var $elements = $('[data-ppa-full-width="true"]');
        $.each( $elements, function( key, item ) {
            var $el = $(this);
            var $container = $el.closest('.container');
            var margin = parseInt($container.css('margin-left'), 10);
            var padding = parseInt($container.css('padding-left'), 10)
            var offset = margin + padding;

            $el.css({
                position: "relative",
                left: -offset,
                "box-sizing": "border-box",
                width: $(window).width(),
                "padding-left": offset + "px",
                "padding-right": offset + "px"
            });
        });
    }
});
— adamj
sumber
0

Saya akan menggunakan dua div 'container' terpisah seperti di bawah ini:

<div class="container">
   /* normal*/
</div>
<div class="container-fluid">
   /*full width container*/
</div>

Perlu diingat bahwa cairan-wadah tidak mengikuti breakpoint Anda dan itu adalah wadah dengan lebar penuh.

— Arash MAS
sumber
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.