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

以下是代码示例(使用bootstrap 4)：

<div  >        <div             >            <div  >                <div                                        ></div>                <div                                        >                    <titre2>{{sections[section.sections[0]]['name']}}</titre2>                </div>                <div                                        ></div>                <div                     >                    <a                        href="{{ path('section',{'section_name': sections[section.sections[0]]['name']}) }}">                        <center>                            <img                                 src="{{ asset(contents[0]|first) | imagine_filter('medium') }}"                                alt="">                        </center>                    </a>                </div>            </div>        </div>        <div             >            <div  >                <div                                        >                    <titre2>{{sections[section.sections[1]]['name']}}</titre2>                </div>                <div                                        ></div>                <div                     >                    <a                        href="{{ path('section',{'section_name': sections[section.sections[1]]['name']}) }}">                        <center>                            <img                                 src="{{ asset(contents[1]|first) | imagine_filter('medium') }}"                                alt="">                        </center>                    </a>                </div>                <div                                        ></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 >	<div >		<div >			<h1>Title #1</h1>			<a href="#null"><img src="http://placehold.it/350x250/"  /></a>		</div>				<div >			<h1>Title #2</h1>			<a href="#null"><img src="http://placehold.it/350x250/"  /></a>		</div>	</div></div>

总结

以上是内存溢出为你收集整理的html – Bootstrap布局不适用于safari全部内容，希望文章能够帮你解决html – Bootstrap布局不适用于safari所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。