Bootstrap布局不适用于safari

Question

我创建了一个网站,其布局与任何浏览器完美呈现,但Safari ... cols未对齐我从他们的div中获取图像.我不知道为什么会这样.你遇到过这样的问题吗？

以下是代码示例(使用Bootstrap 4):

        <div class="row" style="margin: 0px; padding: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"
            style="margin: 0px; padding: 0px;">
            <div class="row align-items-center" style="margin: 0px; padding: 0px;">
                <div
                    class="hidden-xs hidden-sm col-md-3 col-lg-3 col-xl-3 text-center"
                    style="margin: 0px; padding: 0px;"></div>
                <div
                    class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 text-center"
                    style="margin: 0px; padding: 0px;">
                    <titre2>{{sections[section.sections[0]]['name']}}</titre2>
                </div>
                <div
                    class="hidden-xs hidden-sm col-md-3 col-lg-3 col-xl-3 box empty2"
                    style="margin: 0px; padding: 0px;"></div>
                <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 boxsup"
                    style="margin: 0px; padding: 0px;">
                    <a
                        href="{{ path('section', {'section_name': sections[section.sections[0]]['name']}) }}">
                        <center>
                            <img class="ownthumbnail1"
                                src="{{ asset(contents[0]|first) | imagine_filter('medium') }}"
                                alt="">
                        </center>
                    </a>
                </div>
            </div>
        </div>


        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"
            style="margin: 0px; padding: 0px;">
            <div class="row align-items-center" style="margin: 0px; padding: 0px;">
                <div
                    class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 text-center"
                    style="margin: 0px; padding: 0px;">
                    <titre2>{{sections[section.sections[1]]['name']}}</titre2>
                </div>
                <div
                    class="hidden-xs hidden-sm col-md-3 col-lg-3 col-xl-3 text-center"
                    style="margin: 0px; padding: 0px;"></div>
                <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 boxsup"
                    style="margin: 0px; padding: 0px;">
                    <a
                        href="{{ path('section', {'section_name': sections[section.sections[1]]['name']}) }}">
                        <center>
                            <img class="ownthumbnail2"
                                src="{{ asset(contents[1]|first) | imagine_filter('medium') }}"
                                alt="">
                        </center>
                    </a>
                </div>
                <div
                    class="hidden-xs hidden-sm col-md-3 col-lg-3 col-xl-3 box empty2"
                    style="margin: 0px; padding: 0px;"></div>
            </div>
        </div>
    </div>

Answer 1

对于仍然遇到此问题的任何人，我都可以通过添加来解决它

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

显然，这不是最优雅的解决方案，您可能需要查看代码以进行检查和平衡，但在此期间它应该可以解决问题，直到他们修复它。

Answer 2

如果没有更好的代码示例，就很难诊断您声称在 Apple Safari 和 Bootstrap v4 中遇到的确切问题。话虽如此，似乎根据所提供的结构，您可以大大简化代码，这可能会带来解决问题的额外好处。

如果您在 SO 渲染 Bootstrap v4 Alpha 方面遇到问题，您还可以查看此代码的 Bootply： https: //www.bootply.com/o8dF8rD9IH

但本质上，这里发生的是我们依靠.offset-*-*Bootstrap Grid 系统的功能来避免<div>当前代码中的各种空元素。这极大地简化了实现相同结果所需的代码量。

应用于.img-responsive图像（以及该类的宽度）允许图像根据屏幕分辨率更好地缩放。这应该有助于缓解图像超出列范围的情况。

/* Backgrounds just to illustrate .container shape */
.container-fluid {
  background: #eee;
}

.col-md-4 {
  background: #ddd;
}

/* Make .img-responsive images use 100% of the space */
.img-responsive { 
  width: 100%;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid">
	<div class="row text-center">
		<div class="col-xs-12 col-sm-12 col-md-4 offset-md-2">
			<h1>Title #1</h1>
			<a href="#null"><img src="http://placehold.it/350x250/" class="img-responsive" /></a>
		</div>
		
		<div class="col-xs-12 col-sm-12 col-md-4">
			<h1>Title #2</h1>
			<a href="#null"><img src="http://placehold.it/350x250/" class="img-responsive" /></a>
		</div>
	</div>
</div>