Bootstrap: Kabın genişliğini nasıl değiştiririm?

128

Sabit konteyner sınıfına sahip bir web sitesi geliştirmek için Twitter Bootstrap'i kullandım, ancak şimdi müşteri web sitesinin 1170px değil 1000px genişliğinde olmasını istiyor. .Less dosyalarını kullanmıyorum.

Bunu düzeltmenin hızlı bir yolu var mı?

twitter-bootstrap

— alex
kaynak

Buradaki cevaba bakın , sanırım probleminiz bu cevapta Sadece Sabit kemanla çözülecektir .

— 2013

@prem, tx ancak span's veya container gibi önyükleme sınıflarından hiçbirini kullanmadığı için örneği alamıyorum. Bu proje için ihtiyacım olan tek şey, duyarlı önyükleme ile kapsayıcının maksimumunu 940 piksele ayarlamak.

— alex

76

Bootstrap sitesinde Özelleştir bölümüne gidin ve tercih ettiğiniz boyutu seçin. @gridColumnWidthVe @gridGutterWidthdeğişkenleri ayarlamanız gerekecek .

Örneğin: @gridColumnWidth = 65pxve @gridGutterWidth = 20pxbir 1000pxdüzende sonuçlar .

Ardından indirin.

— albertedevigo
kaynak

gridColumnWidth ve gridGutterWidth değişkenlerini değiştirerek tam 1000px konteynere ulaşılamaz ... çünkü (12 * (gridColumnWidth) + 12 (gridGutterWidth)) 1000'e eşit değildir. Ve bu yüzden sadece bu çözümü verdim. Bu doğru mu?

— 2013

15

Teorik olarak, 1000px ile eşleşen sonsuz kombinasyon vardır. Bir örnek: 12 * 65 + 11 * 20 = 1000 (sütunlar arasında yalnızca 11 cilt payı vardır).

— albertedevigo

ha! Basit olanı gerçekten anlamadım ... her neyse, sizin için uygun bir çözümdü.

— 2013

Gönderiniz için teşekkürler, yardımcı oldu;) Sadece bir not: Pratik olarak 1000 piksel genişlik için tam piksel kullanan tam olarak 7 çözüm olacaktır. (sütun genişlikleri 10, 21, 32, 43, 54, 65 ve 76)

— dfherr

@dfherr "Pratik olarak" dediğinizde tam olarak ne demek istediğinizi bilmiyorum, ancak CSS'nin pikseller için ondalık değerleri desteklediğini lütfen unutmayın. Bu nedenle sonsuz çözümler vardır. w3.org/TR/CSS21/syndata.html#length-units

— albertedevigo

234

İşte çözüm:

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}

@ Bastardo'nun cevabında olduğu gibi Bootstrap'i özelleştirmeye karşı bunu yapmanın avantajı , Bootstrap dosyasını değiştirmemesidir. Örneğin, bir CDN kullanıyorsanız, Bootstrap'in çoğunu CDN'den yine de indirebilirsiniz.

— mcbjam
kaynak

10

Cevapların çoğu CDN'yi ihmal ediyor. Cevabınız mükemmel bir çözüm.

— Charles Watson

2

CDN kullanan kişiler için mükemmeldir. Derleme zamanında LESS'i (4 geldiğinde, SASS) değiştirmek, kendi Bootstrap CSS'lerini barındıran kişiler için mükemmeldir. Ancak, sağlanan özel bir LESS'i (veya SASS'ı) değiştirdikten sonra, temel alınan LESS'i (genellikle) bir fark yapmadan yükseltebilirsiniz.

— Greg Pettit

2

Bunun gerçekten geç olduğunu biliyorum, ancak genişlik eklerseniz, verilen kaplar artık daha büyük olma eğilimindedir: yukarıdaki koda otomatik olarak kapsayıcıları maksimum 1170'lerinden daha büyük yapabilirsiniz.

— Rick Calder

Aradığım buydu. Teşekkür ederim.

— tedebus

20

LESS dosyalarını kullanmayacağınızı söyleyerek arkanızdan birini bağlıyorsunuz. İlk Twitter Bootstrap temamı 2.0 kullanarak oluşturdum ve her şeyi CSS'de yaptım - bir override.css dosyası oluşturarak. İşlerin düzgün çalışması günler aldı.

Şimdi 3.0 var. LESS öğrenmenin daha az zaman aldığını garanti etmeme izin verin; bu, CSS konusunda rahatsanız, tüm bu çılgın CSS geçersiz kılma işlemlerini yapmaktan oldukça basittir. İstediğiniz gibi değişiklikler yapmak çocuk oyuncağı.

Bootstrap 3.0'da kap sınıfı genişliği kontrol eder ve içerilen tüm stiller kabı dolduracak şekilde ayarlanır. Kap genişliği değişkenleri, değişkenler.less dosyasının alt kısmındadır.

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));

// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));

// Large screen / wide desktop
@container-lg-desktop:        ((1020px + @grid-gutter-width));

Bazı sitelerde ya 1020 ekranını dolduracak kadar içerik yok ya da estetik nedenlerle daha dar bir çerçeve istiyorsunuz. BS 12 sütunlu bir ızgara kullandığından, 960 gibi bir çoklu kullanıyorum.

— Bastardo Sucio
kaynak

4

Çalışır, ancak: değişkenler isimler @container-sm, @container-mdve @container-lg(şimdi)

— Andreas Dolk

1

@Bastardo nice name +1

— Ömer An

18

@mcbjam zaten bu cevabı verdi ama burada biraz daha açıklama var.

Değişikliği, BS indirmeden CSS dosyanızdaki bir medya sorgusu kullanarak kolayca yapabilirsiniz. Bunu yeni yaptım ve çok güzel çalışıyor.

Medya sorgusunun "min-genişlik" değeri, CSS'ye, kapsayıcınızın genişliğini yalnızca 1200 pikselden büyük ekranlarda (veya oraya dahil etmeyi seçtiğiniz genişlikte) 1000 piksel olarak değiştirmesini söyler . Bu, sitenizin duyarlılığını korur, böylece ekran boyutu bu değerin altına düştüğünde (daha küçük monitör, tablet, akıllı telefon vb.) Siteniz yine de daha küçük ekranlara sığacak şekilde ayarlanacaktır.

@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }
}

— Jeff Schwarting
kaynak

13

Bootstrap 4 için, Sass kullanıyorsanız, burada düzenlenecek değişkendir

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Bu değişkeni geçersiz kılmak için bootstrap'i içe aktarmadan önce .sass dosyamda! Default olmadan $ container-max-widths tanımladım.

Not: Yalnızca xl değerini değiştirmem gerekti, bu yüzden kesme noktaları hakkında düşünmeyi umursamadım.

— Kaizoku Gambare
kaynak

12

1000px genişlik özelliğine sahip kendi içerik kapsayıcı sınıfınızı ayarlayın ve ardından container yerine container- Fluid boostrap sınıfını kullanın.

Çalışır, ancak en iyi çözüm olmayabilir.

— Geo
kaynak

6

Bir sarmalayıcı seçici kullanın ve sayfanın tamamını kaplamak için bu sarmalayıcının içinde% 100 genişliğe sahip bir kap oluşturun.

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

Şimdi maksimum genişlik 1000px olarak ayarlandı ve daha azına veya sassa ihtiyacınız yok.

— Larry Judd
kaynak

0

Konteyner boyutları

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

Kap boyutları bölümünde şu şekilde değiştirin 1140:970

Umarım size yardımcı olur.

Doğruluğun için teşekkürler. bootstrap'i özelleştirmek için bağlantı: https://getbootstrap.com/docs/3.4/customize/

— So Santo
kaynak

-3

Bu CSS parçasını css stilinize ekleyin. Bunun üzerine yazmak için bootstrap css dosyası eklendikten sonra bunu eklemek daha iyidir.

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`

— Mahendra
kaynak