html – Bootstrap布局不适用于safari

我创建了一个网站,其布局与任何浏览器完美呈现,但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>

解决方法

如果没有更好的代码示例,很难诊断您声称使用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>