Bootstrap layout not working with safari

Question

I created a site where the layout perfectly displays any browser, but Safari ... Cola is not aligned. I get images from my divs. I have no idea why this is happening. Are you having such problems?

Here is a sample code (using 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

Without a better code example, it's hard to diagnose the exact problem you are reporting in Apple Safari and Bootstrap v4. At the same time, it seems that, based on the structure, you could greatly simplify your code, which may have an additional advantage for solving your problems.

If you have problems with SO-rendering of Bootstrap v4 Alpha, you can also view Bootply of this code: https://www.bootply.com/o8dF8rD9IH

But basically what happens here is that we rely on the .offset-*-* function of the Bootstrap Grid system to avoid various empty <div> elements in your current code. This greatly simplifies the amount of code needed to achieve the same results.

Applying .img-responsive to images (and width for this class) allows images to scale based on screen resolution. This should help alleviate situations where the image exceeds the borders of your column.

 /* 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

For those who still have this problem, I was able to fix it by adding

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

Obviously, this is not the most elegant solution, and you may have to look at your code for checks and balances, but it should do the trick until they fix it.

Answer 3

According to my understanding from your question. First you need to verify that you are adding the class that is responsible for the recall or not. In bootstrap4, they change the name of a class. So you can get through here . If possible, put a link to your site so that I can give you a better answer.

You need to add a class.

IMG thumbnails

Note

First check the bootstrap version. Sometimes you used bootstrap version 3 and a class that uses bootstrap version 4. That's why they conflict over the class.