带有 flexbox 的引导列在 iOS 和 Safari 上的宽度不合适

Posted 2023-03-06

【中文标题】带有 flexbox 的引导列在 iOS 和 Safari 上的宽度不合适

【英文标题】：Bootstrap columns with flexbox are not taking proper width on iOS and Safari

【发布时间】：2017-08-14 09:36:30

【问题描述】：

我正在尝试将弹性框与引导列一起使用，以便所有列始终水平居中。下面提到的标记适用于 firefox、chrome 和 android，但在 ios 和 safari 上失败。我还没有测试过IE。

HTML：

<!-- The fourth column falls down -->
<div class='row row-1 text-center'>
    <div class="col-xs-3 red">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
</div>
<!-- Works Fine and centers the columns -->  
<div class='row text-center'>
    <div class="col-xs-3 red">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
</div>

CSS：

.row 
    display: flex;
    display: -webkit-flex; 
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
            justify-content: center;

div[class^=col-] 
  float: none;  
  display: inline-block;
  vertical-align: top;

在 Chrome、Firefox 和 Android 上

在 Safari 和 iOS 上

JSFIDDLE

有什么我应该添加到列中以使它们出现在一行中。

【参考方案1】：

是.row 中的pseudo-element 导致了问题。

这是因为 Safari 浏览器处理 :before 和 :after 伪元素，就好像它们是真实元素一样。

试试

 .row:before, .row:after
      display: none;
    

或者更好地创建一个类，比如 .flex-row 并执行此操作

<div class="row flex-row">
  contents here..
</div>


.flex-row
     display: flex;
    display: -webkit-flex; 
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
            justify-content: center;

.flex-row:before, .flex-row:after
   display: none;

FIDDLE

【讨论】：

非常感谢您提供的信息。这解决了这个问题。祝你有美好的一天

欢迎朋友，我在开始使用 flex 时遇到了同样的问题。美好的一天:)

你好基努。您是否有任何解决方案可以在不使用 flexbox 的情况下使引导列居中？我正在使用 Modernizr 来检测是否不支持 flexbox 并将元素浮动到左侧。但我也希望将它集中在不支持 flexbox 的浏览器上。

@KiranDash 看看这篇很棒的文章scotch.io/bar-talk/…

非常感谢您的网址。

【参考方案2】：

如果有人仍然找不到解决方案，我遇到了一个问题，我的列在 Safari 中太高了：

为了解决这个问题，我简单地添加了这个 CSS 选择器（我知道 !important 不是最佳实践，但我尝试了几种解决方案并最终找到了这个）：

.d-flex 
    display: block !important;

现在，我的专栏看起来像这样，这就是它最初在 Chrome、Firefox 等中的样子：

【讨论】：

display: block 使弹性元素成为块元素。因此，如果您不想使用 flexbox，请一开始就不要使用它们。