Ben bir bootstrap newbie ve bootstrap ile kodlamak istiyorum% 100 geniş bir şablon var. İlk sütun sol köşeden başlar ve en sağa uzanan bir Google haritam var. Bunu container-fluidsınıfla yapabileceğimi sanıyordum , ama artık mevcut değil. : Ben nasıl ThemeForest dışında, düzen görmek istiyorsanız burada bağlantı ı Geometri PSD şablonu kullanıyorum 3. bootstrap ile bu düzeni sağlamak için hiçbir fikrim yok http://themeforest.net/item/geometry-design-for- coğrafi konum-sosyal-networkr / 4752268
Yanıtlar:
Bootstrap 3 için özel bir sargı kullanmanız ve genişliğini% 100 olarak ayarlamanız gerekir.
.container-full {
margin: 0 auto;
width: 100%;
}İşte Bootply'da çalışan bir örnek
Özel bir sınıf eklememeyi tercih ediyorsanız, col-lg-12( geniş düzen demo ) içindeki her şeyi sararak çok geniş bir düzen elde edebilirsiniz (% 100 değil )
Bootstrap 3.1 Güncelleştirmesi
container-fluidBu tam bir genişlik düzen oluşturmak için kullanılabilir, böylece sınıf, Bootstrap 3.1 döndü (ek CSS gerekli) ..
Bu komple temel yapısı % 100 genişlik düzeni olarak özyükleme v3.0.0 . Eğer sarmak olmamalıdır <div class="row">ile containersınıfında. Neden containersınıfı çok fazla marj alacak ve bu size bootstrap'in konteyner-sıvı sınıfını mobil ilk sürüm v3.0.0'dan kaldırdığı tam ekran (% 100 genişlik) düzeni sağlamayacaktır.
<div class="row">Kapsayıcı sınıfı olmadan yazmaya başlayın ve% 100 genişlik düzeniyle çalışmaya hazırsınız.
<!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>Sonucu kendiniz görmek için bir bootply oluşturdum. Canlı çıkışa bakın. http://bootply.com/82136 Ve tüm temel bootstrap 3% 100 genişlik düzeni Bir özü oluşturdum. bunu kullanabilirsiniz. Buradaki özeti buradan alın
Daha fazla yardıma ihtiyacınız olursa beni yanıtlayın. Teşekkürler.
.container-full { padding: 0 15px; }
.rowa içinde yer alması gerekmez .containermi?
Bootstrap 3.3.5 ve kullanarak .container-fluid, mobil cihazlarda oluk veya yatay kaydırma olmadan tam genişlik elde ederim. Bunu not et.container-fluid3.1'de yeniden tanıtıldığını .
Mobil / tablette tam genişlik, masaüstünde 1/4 ekran
<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>Tüm çözünürlüklerde tam genişlik (mobil, masa, masaüstü)
<div class="container-fluid"> <!-- Adds 15px left/right padding -->
<div class="row"> <!-- Adds -15px left/right margins -->
<div>
<!-- Full-width content -->
</div>
</div>
</div>Doğru kullanıyorsunuz div.container-fluidve bir div.rowçocuğa da ihtiyacınız var . Ardından, içeriğin ızgara sütunları olmadan içine yerleştirilmesi gerekir. Dokümanlara bir göz attıysanız bu metni bulabilirsiniz:
- Satırlar zorunluluk düzgün hizalama ve doldurma için bir .container (sabit genişlikte) ya da .container akışkanı (tam genişlik) içine yerleştirilebilir.
- Yatay sütun grupları oluşturmak için satırları kullanın.
Izgara sütunlarını kullanmamak, burada belirtildiği gibi uygundur:
- İçerik gereken sütunların içinde yerleştirilebilir ve yalnızca sütunları olabilir satırların hemen çocukları olsun.
Ve bu örneğe bakarak şu metni okuyabilirsiniz:
Tam genişlik, tek sütun : Tam genişlikli elemanlar için ızgara sınıfı gerekmez.
İşte doğru düzeni kullanan bazı öğeleri gösteren canlı bir örnek. Bu şekilde herhangi bir özel CSS veya kesmek gerekmez.
BOOTSTRAP 4'te şunları kullanabilirsiniz:
<div class="row m-0">
my fullwidth div
</div>... üst düzey div olarak yalnızca .m-0 olmadan bir .row kullanırsanız, istenmeyen bir kenar boşluğuna sahip olursunuz, bu da sayfayı tarayıcı penceresinden daha geniş yapar ve yatay bir kaydırma çubuğuna neden olur.
@container-*Genişliği% 100 olarak kullanmak için Bootstrap'i özelleştirebilirsiniz . Ayrıca,.container-fluid3.1.0'da geri dönüyor. :)