Bootstrap Öğesi% 100 Genişlik

Question 1

% 100 renkli alternatif bloklar oluşturmak istiyorum. "İdeal" bir durum, mevcut durumun yanı sıra bir bağlanma olarak resmedilir.

İstenen kurulum:

Şu anda:

İlk fikrim bir div sınıfı oluşturmak, ona bir arka plan rengi vermek ve% 100 genişlik vermekti.

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

Ancak, bunun kesinlikle işe yaramadığını görebilirsiniz. Bir konteyner alanıyla sınırlı. Kabı kapatmaya çalıştım ve bu da işe yaramadı.

Question 2

containerSınıf kasıtlı% 100 genişlik değildir. Görüntü alanının genişliğine bağlı olarak farklı sabit genişliklerdir.

Ekranın tam genişliğinde çalışmak istiyorsanız, şunu kullanın .container-fluid:

Önyükleme 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>

Önyükleme 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>

Question 3

Bootstrap 3 ile istediğiniz kurulumu şu şekilde elde edebilirsiniz :

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

container-fluidBölüm tam genişliği boyunca arka planı değiştirebilirsiniz emin olur. containerBölüm içeriğiniz sabit genişlikte sarılır emin olur.

Bu yaklaşım işe yarıyor, ancak kişisel olarak tüm yuvaları sevmiyorum. Ancak şimdiye kadar daha iyi bir çözüm bulamadım.

Question 4

HIZLI CEVAP

Kullanım birden NESTED DEĞİL .container ler
O sarın .containerEğer a bir tam genişlikli arka plan istiyorum sdiv
Kaydırma div öğesine bir CSS arka planı ekleyin

Fiddles: Basit: https://jsfiddle.net/vLhc35k4/ , Konteyner sınırları: 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*/ }

DAHA FAZLA BİLGİ

İÇİNDE KONTEYNER KULLANMAYIN

Birçok kişi ( yanlış bir şekilde ) iç içe geçmiş kaplar kullanmanız gerektiğini önerecektir.
Eh, gitmelisin DEĞİL .
İç içe geçmeleri gerekmiyor. ( Belgelerdeki " Kaplar " bölümüne bakın)

NASIL ÇALIŞIR

divvarsayılan olarak bir belge gövdesinin tam genişliğine yayılan bir blok öğesidir - tam genişlik özelliği vardır. Aynı zamanda içeriğinin yüksekliğine de sahiptir (aksini belirtmezseniz).

Önyükleme kaplarının bir gövdenin doğrudan alt öğeleri olması gerekmez, bunlar yalnızca bazı dolgulu ve muhtemelen ekran genişliğinde değişken sabit genişlikler içeren kaplardır.

Temel ızgara .containersabit bir genişliğe sahipse, yatay olarak da otomatik olarak ortalanır.
Yani bunu şöyle ifade etmenizin hiçbir farkı yok:

Bir bedenin doğrudan çocuğu
Bir Doğrudan çocuk basic div bir bedenin doğrudan çocuktur.

"Temel" divderken div, onun kenarlığını, dolgusunu, boyutlarını, konumunu veya içerik boyutunu değiştiren bir CSS'ye sahip olmadığını kastediyorum . Gerçekten sadece display: block;CSS ve muhtemelen arka plana sahip bir HTML öğesi .
Ancak elbette dikey CSS (yükseklik, padding-top, ...) ayarlamak önyükleme ızgarasını kırmamalı :-)

Bootstrap'in kendisi de aynı yaklaşımı kullanıyor

... Tamamen kendi web sitesi ve "JUMBOTRON" örneğinde:
http://getbootstrap.com/examples/jumbotron/

Question 5

Vw kullanan bir çözüm var. Yeni bir sıvı kabı oluşturamadığınızda kullanışlıdır. Bu, klasik bir 'kapsayıcı' div'in içinde tam boyutta olacaktır.

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

Bundan sonra kenar çubuğu sorunu var (@Typhlosaurus sayesinde), bu js işlevi ile çözüldü, belge yüklenirken çağırılır ve yeniden boyutlandırılır:

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

Question 6

Bootstrap 4'te, 'w-100' sınıfını kullanabilirsiniz (genişlik olarak w ve% 100 olarak 100)

Belgeleri burada bulabilirsiniz: https://getbootstrap.com/docs/4.0/utilities/sizing/

Question 7

HTML düzenini değiştiremiyorsanız:

.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

Question 8

Onun yerine

style="width:100%"

kullanmayı dene

class="col-xs-12"

size 1 karakter kazandıracak :)

Question 9

Bazen içerik kabını kapatmak mümkün değildir. Kullandığımız çözüm biraz farklı ancak firefox kaydırma çubuğu boyutu nedeniyle taşmayı önlüyor!

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

İşte bir örnek: https://jsfiddle.net/RubbelDeKatz/wvt9253q

Question 10

Üzgünüm, css'inizi de istemeliydim. Olduğu gibi, temelde bakmanız gereken şey, kapsayıcı div stilini css'nizde vermektir .container { width: 100%; }ve daha sonra, kendi genişliklerini vermediğiniz sürece kapalı div'ler bunu miras alır. Ayrıca birkaç kapanış etiketini de </center>kaçırmıştınız ve <center>en azından kodun bu bölümünde, hiç açılmadan kapaklar a . Görselin içeriğinizi içeren aynı div'de mi yoksa ayrı mı olmasını istediğinizden emin değildim, bu yüzden iki örnek oluşturdum. Sadece jsfiddle küçük bir görüntüleme alanı sunduğu için img genişliğini 100px'e değiştirdim. Aradığınız bu değilse bana bildirin.

içerik ve resim ayrı: http://jsfiddle.net/QvqKS/2/

aynı div'deki içerik ve resim (img sola kayar ): http://jsfiddle.net/QvqKS/3/

Question 11

İçeriğini bir miktar dolguyla korumak olduğu için birisinin kapsayıcı genişliğini neden "geçersiz kılmaya" çalıştığını merak ediyorum , ancak benzer bir durum yaşadım (bu yüzden yanıtları olmasına rağmen çözümümü paylaşmak istedim ).

Benim durumumda, tüm içeriğin (tüm sayfaların) bir kapsayıcı içinde görüntülenmesini istedim , bu nedenle bu, _Layout.cshtml dosyamdaki kod parçasıydı:

<div id="body">

    @RenderSection("featured", required: false)

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

Ana Dizin sayfamda , tüm ekran genişliğini doldurmak istediğim bir arka plan başlık resmim vardı, bu nedenle çözüm Index.cshtml'yi şu şekilde yapmaktı:

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

Bunun geçici çözümler yapmaya çalışmaktan daha iyi olduğunu düşünüyorum, çünkü bölümler görünümlerin mizanpajdaki bazı içerikleri dinamik olarak değiştirmesine izin vermek (veya zorlamak) amacıyla yapılmıştır.

Question 12

İnsanlar bu durumda .container-Fluid kullanmanız gerekeceğini söylemiş olsalar da, dolguyu bootstrap'tan da çıkarmanız gerekecek.

Question 13

Aşağıdaki yanıt, herhangi bir ölçüye göre tam olarak optimal değildir, ancak iç div'i tamamen uzatırken konteyner içindeki konumunu koruyan bir şeye ihtiyacım vardı.

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"
            });
        });
    }
});

Question 14

Aşağıdaki gibi iki ayrı 'kapsayıcı' div kullanırdım:

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

Kap sıvısının kesme noktalarınızı takip etmediğini ve tam genişlikte bir kap olduğunu unutmayın.