Soru Flexbox, Safari'deki ilk satırın son sütununu tamamladı


Safari'de ve diğer bazı iOS tabanlı tarayıcılarda ilk satırın son sütunu bir sonraki satıra kaydırılır.

Safari:

enter image description here

Chrome / Diğerleri:

enter image description here

Kod:

.flexthis {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexthis .col-md-4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
<div class="row flexthis">
  <div class="col-md-4 col-sm-6 text-center">
    <div class="product">
      <img src="img.jpg" alt="" class="img-responsive">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>


44
2017-12-13 10:50


Menşei


Sadece Safari değil, iOS'deki hemen hemen tüm tarayıcılarda bu hata var - safari, krom, firefox, opera - Stan Fad
Tüm iOS tarayıcılarda kırılmasının nedeni, iOS'un diğer tarayıcıların Safari'den WebKit kullanmasına izin vermesidir. Bu yüzden, Safari'nin oluşturduğu herhangi bir hata, diğer iOS tarayıcılarda da olacaktır. - Shane Hudson


Cevaplar:


açıklama

Bunun nedeni, Safari'nin şu şekilde davranmasıdır: Önceden ve sonra, sözde-elementlerden sonra, gerçek elemanlarmış gibi. Örneğin. 7 ürün ile bir konteyner hakkında düşünün. Kapsayıcıda varsa: önce ve: Safari, aşağıdaki gibi öğeleri konumlandırır:

[:before ] [1st-item] [2nd-item]

[3rd-item] [4th-item] [5th-item]

[6th-item] [7th-item] [:after  ]

Çözüm

Kabul edilen cevaba bir alternatif olarak, aşağıdakileri kaldırıyorum: önce &: HTML'yi değiştirmek yerine esnek kaplardan sonra. Senin durumunda:

.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
   content: normal; // IE doesn't support `initial`
}

96
2018-04-07 12:44



Sıfırlamayı onaylayabilirim before ve after sorunu Safari'de giderir - Ben
Ben de onaylayabilirim. En iyi cevap olarak görünüyor. - rap-2-h
Bu gerçekten cevap olmalı. Yapı değişmemiş, sadece OP'in problemini düzeltmek için bir css düzenlemesi. - Simon
5/17 bu cevap hala çalışıyor :) teşekkürler! - Kyle Hawk
sizi ve tüm çocuklarınızı kutsasın - allanberry


Sadece sorumu güncellemek için

Bu benim içinde bulunduğum çözümdür, bu esnek bir şekilde uyumlu olan Bootstrap4 için açık bir şekilde düzeltilmiştir. Yani bu sadece bootstrap3 için.

.row.flexthis:after, .row.flexthis:before{
  display: none;
}

6
2018-01-12 11:23





Meselenin çok eski olduğunu biliyorum, ama bugün bu konuya koştum ve 12 saatten fazla bir zaman harcadım. Her ne kadar yaklaşık 10 saat bu safari 12-sütun bootstrap ızgara ile başarısız olduğunu fark vardı ve başka bir sorun değildir.

Yaptığım düzeltmek oldukça basit. İşte Visual Composer için bir versiyon. Sınıf isimleri diğer çerçevelere göre değişebilir.

.vc_row-flex:before, .vc_row-flex:after{
  width: 0;
}

5
2017-07-11 13:11





Bu tür bir hatayı düzeltmek için daha fazla ders eklemek istemedim. alternatif olarak .row sınıfının kendisini düzeltebilirsiniz.

.row {
    &:before {
        content: none;
    }

    &:after {
        content: '';
    }
} 

3
2017-08-25 15:27





Bootstrap kullanarak basit bir ızgara yapmaya çalışırken bu sorunu bulundu Yirmi üç CMS ve aynı hatayı Safari'de aldım. Her neyse, bu benim için çözdü:

.flex-container:before {
  display: inline;
}

2
2018-04-10 12:29





Bu, Safari'nin oluşturulmasında bir hata gibi görünüyor. Sütunların Bootstrap kabını taşmasına (ve dolayısıyla sarmasına) neden oluyor (bir çeşit Webkit yuvarlama hatası olabilir mi?). Bootstrap kullandığınızdan, flex kullanmadan istenen sonucu elde edebilmeniz gerekir:

<div class="row">
    <div class="col-md-4 col-sm-6 text-center">
        <div class="product">
            <img src="img.jpg" alt="" class="img-responsive">
            <h3>Name</h3>
            <p>Description</p>
        </div>
    </div>
</div>
<style>
    .product {
        /* this is to automatically center and prevent overflow
           on very narrow viewports */
        display: inline-block;
        max-width: 100%;
    }
</style>

Fakat! Şimdi örneğinize bakan problem, ürün bloklarınızı aynı büyüklükte tutmanız veya ızgara şeklini korumanız gerektiğidir. Bir olası çözüm .product sabit bir yükseklik vermek ve medya sorguları kullanarak ayarlamaktır.

İşte Safari ve diğer tarayıcılarda çalışan bir örnek: http://codepen.io/anon/pen/PZbNMX Ayrıca, resimlerin veya açıklama metninin, bazı şeylerin bakımını kolaylaştırmak için belirli bir boyutta tutulması için stil kurallarını kullanabilirsiniz.

Başka bir olası çözüm daha dinamik üniforma boyutlandırma için izin vermek için bir komut dosyası veya jQuery eklentisi kullanmaktır, ama ben bu şeyler ile ilgili olarak meraklı değilim.

Safari kullanarak flex ve Bootstrap'ı birleştirmeye çalışırken aynı konuya girdim, bu yüzden umarım yardımcı olur.


0
2017-12-29 02:01





Aynı problemi yaşadım ve cevap, safari'deki Flex kutusunun, görüntülenen aynı div üzerinde temizlenen şamandıranlar gibi görünmemesiydi: flex.


0
2018-02-08 17:02





.row:before, .row:after {
content:'';
display:block;
width:100%;
height:0;
}
.row:after {
clear:both;
}

0
2017-08-18 21:02



lütfen bunun neden işe yaradığını açıklayın. Anahtarın hangi kısmı - Bojan Petkovic


Ekleyerek bunu düzeltemedim

.row:before, .row:after {
display: flex !important;
}

Açıkçası bu en zarif çözüm değil, aynı zamanda bazı düzeltmeler yapana kadar çalışabilir.


0
2017-10-27 20:27





Bu konuda da birkaç saat harcadım. Benim durumumda, tüm öğeleri bir row aynı yüksekliğe sahip. Safari dışındaki tüm tarayıcılar doğru şekilde oluşturdu, ancak yukarıdaki cevaplardan hiçbiri sorunumu düzeltmedi.

Ben hala orada olduğunu keşfedene kadar Bootstrap  clearfix kullanılan hack: (kod bir  proje, ancak genel Bootstrap aksi halde)

@foreach ($articles as $key => $article)
    @if ($key % 3 === 0)
        <div class="clearfix hidden-xs hidden-sm"></div>
    @endif
    @if ($key % 2 === 0)
        <div class="clearfix hidden-lg hidden-md"></div>
    @endif

    etc...
@endforeach

Görünüşe göre, Safari’den diğer tarayıcılar .clearfix Flexbox kullanıldığında bir şekilde.

Yani, sütunlarınızda flexbox kullanırken, artık Bootstrap'in clearfix'ini kullanmaya gerek kalmaz.


0
2017-12-14 09:18