All geek questions in one place

Bootstrap 3 responsive to multiple breakpoints

I am using the latest Bootstrap 3.0 RC1 and trying to create an overview of the image with responsiveness and multiple breakpoints when the images become too small (as shown in Dribbble).

Questions:

  • Image scaling appears only if there are two or less lines (it should work with 3-4 images as well).
  • My tear lines or responsiveness cause different image sizes. I need to make sure that the max img size after the breaks is the same as the max size when there are 4 lines. For example, when split into two or one images, at first they will be displayed much larger than the largest size with 4 per line.

I hope someone can help me, I am starting to create responsive things.

Regards

Link to jsfiddle:

http://jsfiddle.net/6dckB/ (your browser must be wide to see effects)

HTML:

<div class="container"> <ul class="row-fluid"> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> </ul> </div>

CSS

 .row-fluid { padding-left: 0; list-style: none; } .row-fluid:before, .row-fluid:after { content: " "; /* 1 */ display: table; /* 2 */ } .row-fluid:after { clear: both; } .row-fluid:before, .row-fluid:after { content: " "; /* 1 */ display: table; /* 2 */ } .row-fluid:after { clear: both; } @media (min-width: 768px) { .row-fluid { margin-left: -10px; margin-right: -10px; } } .row-fluid .row { margin-left: -10px; margin-right: -10px; } .row-fluid .group { position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; float: left; width: 50%; margin-bottom: 20px; } @media (max-width: 400px) { .row-fluid .group { position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; float: left; width: 100%; } } @media (min-width: 768px) and (max-width: 991px) { .row-fluid .group { position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; float: left; width: 33.33333333333333%; } } @media (min-width: 992px) { .row-fluid .group { position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; float: left; width: 25%; } }
+4
source share
3 answers

It doesn't look like you're using Bootstrap 3 RC1. The link in your violin is broken. Bootstrap RC1 no longer has .row-fluid .

You can simply simplify everything by letting you react to functions in 3 to get the job done for you. BS3 now has 3 grid sizes - tiny, small and large, which are used to control the display on different devices / widths. You could do something like this.

 <div class="row"> <div class="col-lg-3 col-sm-4 col-6"> <a href="#" class="thumbnail"> <img src="http://placehold.it/350x150" class="img-responsive"> </a> </div> <div class="col-lg-3 col-sm-4 col-6"> <a href="#" class="thumbnail"> <img src="http://placehold.it/350x150" class="img-responsive"> </a> </div> ... </div>

This will help you.

  • 4 per line on large screens ( col-lg-3 )
  • 3 per line on tablets ( col-sm-4 )
  • 2 per line on tiny phones ( col-6 )

Demo: http://bootply.com/70929

+11
source

Just changed some css and it works. See this script: http://jsfiddle.net/J3F99/

Well, the main changes:

  • box-sizing: border-box to.group, so width% includes padding (10px).
  • Added display: inline-block to and removed float: left in.group and text-align: center in .row-fluid so that .group elements are centered.
  • Added max-width: 350px and max-height: 150px in .group
  • Adjusted% width for different screen sizes to cover full width and still maintain maximum width
  • Removed css in media queries, removing duplicate properties that are already inherited from the common style for .group for all screens.

Here it is. It works well in chrome. I do not test in other browsers. During testing, use the full download.

The main problem here is the padding specified in pixels. To ensure a clean fluid structure, you should use% instead, if pixels. And for this you need to use margin, not padding for .group. Since the margin in% depends on the width of the container.

For example, 4.group elements with a width of 20%, as well as margins with left and right 2.5% will fit exactly into the container (there is liquid here), without leaving a single pixel.

4 * 20 + 4 * 2.5 * 2 = 100%

I recommend you go with this method. See @Bharat Parmar for this.

+1
source

Check out this demo: http://depotwebdesigner.com/responsive/

HTML:

 <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Responsive Image</a> <div class="nav-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </div> <!-- Responsive Image --> <div class="container"> <div class="starter-template"> <ul> <li><img src="http://dribbble.s3.amazonaws.com/users/31348/screenshots/1185698/slightly_stoopid_teaser.jpg" alt=""></li> <li><img src="http://dribbble.s3.amazonaws.com/users/12/screenshots/1185739/google_chromescreensnapz001_teaser.png" alt=""></li> <li><img src="http://dribbble.s3.amazonaws.com/users/22225/screenshots/1185692/cooper_workshop_teaser.jpg" alt=""></li> <li><img src="http://dribbble.s3.amazonaws.com/users/565/screenshots/1186432/kreyos_sport_mode_1x.jpg" alt=""></li> <li><img src="http://dribbble.s3.amazonaws.com/users/6014/screenshots/1186351/oliver.jpg" alt=""></li> <li><img src="http://dribbble.s3.amazonaws.com/users/93631/screenshots/1185715/drip-lion.jpg" alt=""></li> <li><img src="http://dribbble.s3.amazonaws.com/users/104062/screenshots/1186702/pw_1x.png" alt=""></li> <li><img src="http://dribbble.s3.amazonaws.com/users/7528/screenshots/1186361/genesisproject_1x.jpg" alt=""></li> <li><img src="http://dribbble.s3.amazonaws.com/users/2896/screenshots/1186026/free_to_be_1x.png" alt=""></li> <li><img src="http://dribbble.s3.amazonaws.com/users/2559/screenshots/1185760/screen_shot_2013-08-06_at_10.32.27_am.png" alt=""></li> <li><img src="http://dribbble.s3.amazonaws.com/users/4737/screenshots/1178958/untitled-1_1x.png" alt=""></li> <li><img src="http://dribbble.s3.amazonaws.com/users/4737/screenshots/1186176/site_1x.jpg" alt=""></li> </ul> </div> </div>

CSS

 body { padding-top: 50px; background: #f8f8f8; } img { max-width: 100%; max-height: 150px; } ul{ padding: 0; } .content { width: 970px; margin: 0 auto; } .starter-template { margin-top: 10px; } .starter-template li { width: 20%; position: relative; float:left; list-style: none; background: #fff; padding: 10px; margin-bottom: 20px; margin-right: 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); } @media (max-width: 315px) { .starter-template li { margin: 0 0 3px 3px !important; } } @media (max-width: 735px) and (min-width: 450px) { .starter-template li { width: 30%; margin-right: 0; margin-left: 15px; } } @media (max-width: 450px) { .starter-template li { width: 45%; margin-right: 20px; margin-left: 10px; } .starter-template li:nth-child(2n){ margin-left: 0; margin-right: 0; } }

jsfiddle: http://jsfiddle.net/VJBjL/5/

0
source

Source: https://habr.com/ru/post/1493969/

More articles:


All Articles