I made a website where the layout renders perfectly with any browser but Safari... The cols are not aligned I get images out of their divs. I have no idea why this happen. Did you experience such problems ?
Here is an example of the 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> 2 Answers
Answers 1
Without a better example of code it's difficult to diagnose the exact problem you claim to be experiencing with Apple Safari and Bootstrap v4. That being said, it seems that based on the structure provided you could greatly simplify your code which might have the added benefit of addressing your issues.
In case you have issues with SO rendering Bootstrap v4 Alpha you can also view a Bootply of this code: https://www.bootply.com/o8dF8rD9IH
But essentially what is happening here is that we're relying on the .offset-*-* feature of the Bootstrap Grid system to avoid the various empty <div> elements in your current code. This greatly simplifies the amount of code necessary to achieve the same results.
Applying .img-responsive to the images (and a width to that class) allows the images to better scale depending on the screen resolution. This should help alleviate situations where the image exceeds the confines 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> Answers 2
As per my understanding from your question, First you need to check that have you add image responsive class or not. In bootstrap4 , they change some class name. So you can go through here. If possible put link of your site so I can give you better answer for that.
You need add class.
img-thumbnail
NOTE
First check your bootstrap version.Sometime you used version bootstrap version 3 and class used bootstrap version 4. That's why they conflict by class.
0 comments:
Post a Comment