mesele

Projemde içine Bootstrap 3 uygulama hakkında düşünüyorum ve bu ön uç çerçevesi geçmeden önce bunun işlevleri ve özellikleri bazılarını test ediyorum.Bootstrap 3 akışkan kabı% 100 genişlik

image http://i58.tinypic.com/29lzrwl.png

fark ettim garip şey bir sıvı Bootstrap kabı aslında görüntü alanı genişliğinin% 100'ünü kapsayan (pembe Bootstrap elemanın sağdaki 1px satır fark) olmamasıdır Bu benim HTML'm benziyor. Temelde varsayılan Bootstrap şablonu.

.full-width { 
    width: 100%; 
    background-color: #808080; 
} 
.col-md-3 { 
    background-color: #4f4; 
} 
.col-md-9 { 
    background-color: #f4f; 
}

Neden genişliğinin% 100'ünü kapsayan bu sıvı kabı değil: Açıkçası ben standart, bootstrap son CSS versiyonunu ve kendi özel CSS kullanmak

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Page title</title> 
     <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS --> 
     <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS --> 
     <!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
     <![endif]--> 
    </head> 
    <body> 
     <div class="full-width">This is not bootstrap</div> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-3"> 
        This is Bootstrap 
       </div> 
       <div class="col-md-9"> 
        This is Bootstrap too 
       </div> 
      </div> 
     </div> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

? Sadece 1px olmasına rağmen sayfa tasarımımı kesinlikle kıracak. http://jsfiddle.net/J6UE5

Sorunum bir Mac'i OS X 10.9.4 Safari'yi (7.0.5) kullanılarak görünüm yeniden boyutlandırmak yeniden oluşturmak için:

Sayı rekreasyon

Ben bu konuda ilgili, istek üzerine bir jsfiddle yarattı. Pembe kabın sağ tarafındaki 1px çizgisinin yeniden boyutlandırılırken görünüp kaybolacağını fark edeceksiniz. Yeşil ve pembe kap yığıldıktan sonra (Bootstrap davranışı) 1px çizgisi kaybolur ve her şey% 100 genişliğindedir.

kaynak

2014-07-26 Peter de Leeuw

nasıl çalıştığı hakkında

.container { padding: 0px; }

fazla açıklama? – ahnbizcad

Bu satırı özel css dosyanıza eklediniz!

body { 
     width: 100%; 
     margin: 0%;  
}

/***************************************** ******************************************/

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Page title</title> 
     <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS --> 
     <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS --> 
     <!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
     <![endif]--> 
     <style type="text/css"> 
      .full-width { 
       max-width:100%; 
       top:0; 
       left:0; 
       min-height: 100%; 
       min-width: 1024px; 
       background-color: #808080; 
      } 
      .col-md-3 { 
       background-color: #4f4; 
      } 
      .col-md-9 { 
       background-color: #f4f; 
      } 

      body { 
       width: 100%; 
       margin: 0%; 
      } 
     } 
    </style> 

    </head> 
    <body> 
     <div class="full-width">This is not bootstrap</div> 
     <div class="container-fluid"> 
      <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-3"> 
        This is Bootstrap 
       </div> 
       <div class="col-md-9"> 
        This is Bootstrap too 
       </div> 
      </div> 
     </div> 
     </div> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

kaynak

2014-07-26 11:30:15

Önyükleme çekirdek çekirdeği CSS dosyası zaten aşağıdakileri içerir: 0; vücut etiketi için. Genişlik ekleme:% 100; maalesef hile yapmadı. –

, medya sorgusunu da kullanabilirsiniz. –

hızlı birçekerek tüm diğer css dosyaları vardır:

bu sorunu yeniden oluşturmak çalışıyor ve önyükleme css değiştirmek deneyin

gibi olamaz, bootstrap.css

düzenlemek bootstrap.min.css için,

kaynak

2014-07-26 13:07:04 Bosc

Maalesef çalışmak için bootply bağlantısını alamıyorum. Bir uygulama hatası gösterir. İnsanların bakması için bir keman oluşturdum. OS X 10.9.4 ile Mac üzerinde Safari (7.0.5) kullanarak - eğer mümkünse - yeniden oluşturmaya çalışın. http://jsfiddle.net/J6UE5. –

.container öğesinde çalışan ince, beyaz çizgilerini Bootstrap uygulamasında 15px'lik dolgu ekler.

.row negatif sol ve 15px sağ kenar boşlukları vardır ve

.column 15px dolgu maddesi sunuyor.

CSS'nizdeki kapsayıcı dolgu değerlerini geçersiz kılın (ve destekleyici kodunuzun ardından bunları gerektiği gibi üzerine yazdığınızdan emin olun).konteynerler, konteyner-sıvılar, satırlar ve sütunlar konteyner BB'nin dolgu geçersiz kılabilir miyim burada

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

kaynak

2014-09-30 22:44:09 ahnbizcad

-3

.container-fluid { 
    padding-right:0;padding-left:0; 
    margin-right:-15px;margin-left:-15px 
}

kaynak

2016-12-21 10:56:52

Yığın Taşması'na Hoş Geldiniz! Bu kod pasajı [bir açıklama dahil] [// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers] sorusunu çözebilirken, yayınınızın kalitesini artırmanıza yardımcı olur. İleride okuyucuları için soruya cevap olduğunu hatırlayın ve bu kullanıcıların da kod öneri nedenlerini bilmiyor olabilir. Lütfen kodunuzu açıklayıcı yorumlarla doldurmamaya çalışın, bu hem kodun hem de açıklamaların okunabilirliğini azaltır! – kayess

Lütfen [düzenle] bağlantısını kullanın, bu kodun nasıl çalıştığını açıklayın ve sadece kodu vermeyin, çünkü açıklama gelecekteki okuyuculara yardımcı olma olasılığı daha yüksektir. Ayrıca bakınız [cevap]. –

<div class="row" style="margin-left: -30px; padding: 0px; background-color: rgba(255, 3, 53, 0.49);"> 
    <div class="col-lg-12"> 
      <p style="color: green;">Foo</p> 
     </div> 
</div>

kaynak

2017-01-23 22:57:54

Lütfen, cevaptaki kodun soruyla nasıl ilişkili olduğuna dair en az küçük yorum eklemek için her zaman deneyin. Teşekkürler –

Bootstrap 3 akışkan kabı% 100 genişlik

mesele

Sayı rekreasyon

cevap

İlgili konular