सवाल फ्लेक्सबॉक्स सफारी में पहली पंक्ति के अंतिम कॉलम को लपेटता है


सफारी में देखे जाने पर पहली पंक्ति का अंतिम कॉलम अगली पंक्ति में लपेटा जाता है, और कुछ अन्य आईओएस आधारित ब्राउज़र।

सफारी:

enter image description here

क्रोम / अन्य:

enter image description here

कोड:

.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


मूल


यह केवल सफारी नहीं है, लेकिन आईओएस पर लगभग सभी ब्राउज़रों में यह बग है - सफारी, क्रोम, फ़ायरफ़ॉक्स, ओपेरा - Stan Fad
सभी आईओएस ब्राउज़र में तोड़ने का कारण यह है कि आईओएस केवल अन्य ब्राउज़रों को सफारी से वेबकिट का उपयोग करने की इजाजत देता है। तो सफारी के पास कोई भी बग, प्रतिपादन के साथ, अन्य आईओएस ब्राउज़र पर भी होगा। - Shane Hudson


जवाब:


व्याख्या

ऐसा इसलिए होता है क्योंकि सफारी का इलाज होता है: पहले और: छद्म तत्वों के बाद जैसे कि वे वास्तविक तत्व थे। जैसे 7 वस्तुओं के साथ एक कंटेनर के बारे में सोचो। यदि कंटेनर में है: पहले और: सफारी इस तरह की वस्तुओं को स्थिति के बाद रखेगा:

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

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

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

उपाय

स्वीकार्य उत्तर के विकल्प के रूप में मैं हटा देता हूं: पहले और: HTML को बदलने के बजाय फ्लेक्स कंटेनर के बाद। आपके मामले में:

.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



मैं रीसेट करने की पुष्टि कर सकता हूं before तथा after सफारी में इस मुद्दे को हल करता है - Ben
मैं भी इसकी पुष्टि कर सकता हूं। सबसे अच्छा जवाब लगता है। - rap-2-h
यह वास्तव में जवाब होना चाहिए। संरचना अपरिवर्तित है, ओपी की समस्या को ठीक करने के लिए केवल एक सीएसएस संपादित करें। - Simon
5/17 यह उत्तर अभी भी काम करता है :) धन्यवाद आदमी! - Kyle Hawk
आपको और आपके सभी बच्चों को आशीर्वाद दें - allanberry


बस मेरे प्रश्न पर अपडेट करने के लिए

यह वह समाधान है जिसके साथ मैं जाता हूं, यह स्पष्ट रूप से बूटस्ट्रैप 4 के लिए तय किया गया है, जो फ्लेक्सबॉक्स संगत है। तो यह केवल बूटस्ट्रैप 3 के लिए है।

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

6
2018-01-12 11:23





मुझे पता है कि यह मुद्दा काफी पुराना है, लेकिन मैं आज इस मुद्दे में भाग गया, और इसे ठीक करने में 12 घंटे से अधिक बर्बाद हो गया। हालांकि इसमें से लगभग 10 घंटे यह महसूस करने में व्यतीत किए गए थे कि सफारी 12-कॉलम बूटस्ट्रैप ग्रिड के साथ विफल रहा है, और यह कोई अन्य मुद्दा नहीं है।

ठीक है कि मैंने बनाया है बल्कि सरल है। विजुअल कंपोज़र के लिए संस्करण यहां दिया गया है। कक्षा के नाम अन्य ढांचे के लिए भिन्न हो सकते हैं।

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

5
2017-07-11 13:11





मैं इस तरह की बग को ठीक करने के लिए और कक्षाएं नहीं जोड़ना चाहता था, तो वैकल्पिक रूप से आप .row कक्षा को स्वयं ठीक कर सकते हैं।

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

    &:after {
        content: '';
    }
} 

3
2017-08-25 15:27





बूटस्ट्रैप का उपयोग करके एक साधारण ग्रिड करने की कोशिश कर रहे इस मुद्दे को मिला तेईस सीएमएस, और सफारी में एक ही बग मिला। वैसे भी, यह मेरे लिए हल हो गया:

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

2
2018-04-10 12:29





यह सफारी के प्रतिपादन में एक बग प्रतीत होता है जिससे कॉलम बूटस्ट्रैप कंटेनर (और इसलिए कुछ प्रकार की वेबकिट राउंडिंग त्रुटि हो सकती है) बहती है (और इसलिए लपेटती है)। चूंकि आप बूटस्ट्रैप का उपयोग कर रहे हैं, इसलिए आप फ्लेक्स का उपयोग किये बिना वांछित परिणाम प्राप्त करने में सक्षम होना चाहिए:

<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>

परंतु! अब आपके उदाहरण को देखने में समस्या यह है कि आपको अपने उत्पाद को समान आकार को ब्लॉक करने की आवश्यकता है या ग्रिड इसका आकार नहीं रखेगा। एक संभावित समाधान है। उत्पाद को एक निश्चित ऊंचाई प्रदान करना और मीडिया प्रश्नों का उपयोग करके समायोजित करना।

यहां एक उदाहरण दिया गया है जो सफारी और अन्य ब्राउज़रों में काम करता है: http://codepen.io/anon/pen/PZbNMX इसके अतिरिक्त, आप चीजों को बनाए रखने के लिए चीजों को आसान बनाने के लिए छवियों या वर्णन टेक्स्ट को एक निश्चित आकार में रखने के लिए शैली नियमों का उपयोग कर सकते हैं।

एक और संभावित समाधान एक स्क्रिप्ट या jQuery प्लगइन का उपयोग करना है ताकि अधिक गतिशील वर्दी आकार देने की अनुमति मिल सके, लेकिन मैं उस सामान के साथ समझदार नहीं हूं।

सफारी का उपयोग करके फ्लेक्स और बूटस्ट्रैप को गठबंधन करने की कोशिश करते समय मैं एक ही मुद्दे में भाग गया, इसलिए मुझे उम्मीद है कि इससे मदद मिलती है।


0
2017-12-29 02:01





मुझे एक ही समस्या थी और जवाब यह था कि सफारी पर फ्लेक्स बॉक्स ऐसा लगता है कि उसी डिवीजन पर फ्लोट को साफ़ किया जा रहा है: फ्लेक्स।


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



कृपया बताएं कि यह क्यों काम करेगा। कुंजी क्या हिस्सा है - Bojan Petkovic


मैं इसे जोड़कर ठीक करने में सक्षम था

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

जाहिर है यह सबसे सुंदर समाधान नहीं है लेकिन यह तब तक कुछ के लिए काम कर सकता है जब तक कि वे इसे ठीक न करें।


0
2017-10-27 20:27





मैंने इस मुद्दे पर कुछ घंटे बिताए हैं। मेरे मामले में मैंने सभी तत्वों को बनाने के लिए मौजूदा प्रोजेक्ट में फ्लेक्सबॉक्स डाला row एक ही ऊंचाई है। सफारी को छोड़कर सभी ब्राउज़रों ने इसे सही ढंग से प्रस्तुत किया, लेकिन उपर्युक्त उत्तरों में से कोई भी मेरी समस्या को ठीक करने लग रहा था।

जब तक मुझे पता चला कि अभी भी एक था Bootstrap  clearfix इस्तेमाल किया जा रहा हैक: (कोड ए से है  परियोजना, लेकिन सामान्य बूटस्ट्रैप अन्यथा)

@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

जाहिर है, सफारी की तुलना में अन्य ब्राउज़र अनदेखा करते हैं .clearfix किसी भी तरह से जब flexbox का उपयोग किया जा रहा है।

इसलिए, अपने कॉलम पर फ्लेक्सबॉक्स का उपयोग करते समय, बूटस्ट्रैप के स्पष्टफिक्स का उपयोग करने की कोई आवश्यकता नहीं है।


0
2017-12-14 09:18





बूटस्ट्रैप 4 में डिस्प्ले के साथ समस्याएं हैं: ब्लॉक; संपत्ति जब सीएसएस से या जावास्क्रिप्ट से .row वर्ग पर सेट की जाती है। मुझे इसके लिए एक समाधान मिला बस एक वर्ग के रूप में बनाएँ:

.display-block {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}

और फिर जब आप पंक्ति प्रदर्शित करना चाहते हैं तो इस कक्षा को लागू करें।


0
2018-03-13 12:52