引导布局不适用于 safari

Question

我创建了一个网站，该网站的布局可以与除 Safari 之外的任何浏览器完美呈现……列未对齐我从它们的 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-*-* 功能来避免当前代码中出现各种空的<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> 

Answer 3

根据我对您问题的理解，首先您需要检查是否添加了图像响应类。在 bootstrap4 中，他们更改了一些类名。所以你可以通过here。如果可能的话，把你的网站的链接，这样我就可以给你更好的答案。

你需要添加类。

img 缩略图

注意

首先检查您的引导程序版本。有时您使用版本引导程序版本 3，而类使用引导程序版本 4。这就是它们按类发生冲突的原因。