Bootstrap - Ekran boyutu daha küçük olduğunda dolguyu veya kenar boşluğunu kaldırma

DÜZENLENDİ: Belki de ekran 480 piksel genişliğin altına düşürüldüğünde hangi seçicinin yan dolguyu ayarladığını sormalıyım? Bunu bulmak için bir süredir bootstrap-responsiveness.css'ye göz atıyorum ama hiçbir şey bunu etkilemiyor gibi görünüyor.

Orijinal Temel olarak, daha küçük cihaz ekranlarında yanıt verebilmek için herhangi bir varsayılan dolguyu veya kenar boşluğunu kaldırmak istiyorum.

Ben var background colorgeçersizleştirilebilen container-fluidselektör ve daha büyük ekran için onlar genişliği boyunca% 100 mükemmel içinde oluşturulur, ancak ekranı küçük boyutlarda düşürülür, varsayılan olarak, Bootstrap bir marj veya dolgu eklemek gibi görünüyor container-fluidya container.

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

Bootstrap'ın varsayılan stilinin üzerine yazmak için özel css kullanırsam, daha küçük ekranlarda bu dolguyu kaldırmak için hangi medya sorgusunun veya seçicinin üzerine yazmalıyım?

@Media sorgusu özellikle 'telefonlar' içindir ..

@media (max-width: 480px) { ... }

Ancak, daha küçük ekran boyutları için dolguyu / kenar boşluğunu kaldırmak isteyebilirsiniz. Bootstrap varsayılan olarak gövde, kapsayıcı ve gezinme çubuklarının kenar boşluklarını / dolgusunu 978 pikselde ayarlar.

İşte benim için (çoğu durumda) işe yarayan bazı sorgular:

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

Demo

Bootstrap 4 güncellemesi

Farklı ekran genişlikleri (kesme noktaları) için dolgu / kenar boşlukları ayarlamanıza olanak tanıyan yeni duyarlı aralık araçlarını kullanın : https://stackoverflow.com/a/43208888/171456

Buradaki sorun, kap dolgusunun kaldırılmasından çok daha karmaşıktır çünkü ızgara yapısı, kapalı satırlar için negatif kenar boşlukları uygularken bu dolguyu kullanır.

Bu durumda konteyner dolgusunun kaldırılması, bu konteyner sınıfının içindeki tüm satırların neden olduğu bir x ekseni taşmasına neden olacaktır, bu, Bootstrap Grid ile ilgili en aptalca şeylerden biridir.

Mantıksal olarak ona yaklaşılmalıdır

1. .containerSınıfı asla satırlardan başka bir şey için kullanma
2. .containerIzgara dışı html ile kullanmak için dolgusu olmayan sınıfın bir klonunu oluşturun
3. Çıkartmak için .containermobil üzerine dolgu elle ardından medya sorgu ile kaldırabilirsiniz overflow-x: hidden;çok güvenilir değil ama çoğu durumda çalışır.

LESSSon sonucu kullanıyorsanız böyle görünecek

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

Medya sorgusunu, hedeflemek istediğiniz boyuta değiştirin.

Son düşüncelerim, Foundation FrameworkGrid'i daha gelişmiş bir yol olarak kullanmanızı şiddetle tavsiye ederim.

Bu iş parçacığı, benim özel durumumdaki çözümü bulmamda yardımcı oldu (bootstrap 3)

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}

Bunun gibi problemleri çözmek için CSS kullanıyorum - bence en hızlı ve basit yol ... Sadece ihtiyaçlarınıza göre değiştirin ...

@media only screen and (max-width: 480px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_id {width:000px;height:000px;}
}

Cihazın% 100 genişliğine giden bir öğe elde etmemin yolu, üzerinde negatif sol ve sağ kenar boşlukları kullanmaktır. Gövdenin 24 piksellik bir dolgusu vardır, bu nedenle negatif kenar boşluklarını aşağıdakiler için kullanabilirsiniz:

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}

Bootstrap 4'te, ilk konteynerin sahip olduğu 15px'lik kenar boşluğu, tüm satırlara ve sütunlara doğru basamaklanır. Yani, bunun gibi bir şey benim için çalışıyor ...

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding-left: 5px;
        padding-right: 5px;
    }
    .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }
}

Bu sorunu benzer biçimlendirme ve kod kullanan sitelerde yaşadım ve bazı sitelerimi çalıştırırken bazılarını çalıştırmayan eksik ayrıntıların ne olduğu konusunda beynimi harap ettim.

Bootstrap 3 için: Benim için cevap .container-Fluide, .row için css'yi yeniden yazmak veya marjları sıfırlamak değildi, fark ettiğim tutarlı model , daha uzun kelimelerin tasarımın dışına çıkması ve kenar boşlukları oluşturmasıydı .

Çözüm adımları:

1. Kapsayıcılar içeren bölümleri geçici olarak silerek sayfanızı test edin ve sitenizi küçük tarayıcılarda test edin. Bu, sorunlu kabınızı tanımlayacaktır.

2. Bir div biçimlendirme sorununuz olabilir. Eğer yaparsan, düzelt. Her şey yolundaysa:

3. Kaydırılmayan uzun kelimeler kullanıp kullanmadığınızı belirleyin. Sözcüğü değiştiremiyorsanız (etiket satırları veya sloganlar vb.)

Çözüm 1: Daha küçük ekran için medya sorgunuzda yazı tipini daha küçük boyuta biçimlendirin (genellikle @media'yı (maks-genişlik: 767px) yeterli buluyorum).

VEYA:

2.Çözüm:

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

Paulius Marčiukaitis'in CSS'si Genesis temam için güzelce çalıştı, işte ihtiyacım için onu nasıl daha da değiştirdim:

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

Kolay çözüm, böyle bir şey yazmaktır.

px-lg-1

mb-lg-5

Lg ekleyerek, sınıf yalnızca büyük ekranlarda uygulanacaktır

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

İşte Bootstrap 3/4 için yaptıklarım

Kap yerine kap sıvısı kullanın.

Bunu CSS'me ekle

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

Bu, 1400 piksel genişliğindeki ekranın altındaki kenar boşluklarını kaldırır

Kenar boşluğu sorununu yaratabilecek başka bir css, css'nizde bulunmasıdır direction:someValue, bu yüzden onu baş harfine ayarlayarak kaldırın.

Örneğin:

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}