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

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

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

但实际上这里发生的事情是我们依赖Bootstrap网格系统的.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 2

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

来解决此问题

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

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

Answer 3

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

您需要添加课程。

IMG-缩略图

注意

首先检查你的bootstrap版本。有时你使用版本引导版本3和类使用bootstrap版本4.这就是为什么它们按类冲突。

Bootstrap布局不适用于safari

3 个答案: