probably i'm missing or have misinterpreted bs documentation, html below works expected if use text instead of images, place images breaks on xs , sm.
by expected mean: 1 row 8 columns on >= md, 2 rows 4 columns on sm, 4 rows 2 columns on xs.
on browsers (chrome/firefox) behavior seems be:
- first row correct
- second row align first image right , break line (go next line)
any suggestion?
<div class="container"> <div class="row"> <div class="col-xs-6 col-sm-3 col-md-1 text-center"> <img src="http://placehold.it/50x50" /> </div> <div class="col-xs-6 col-sm-3 col-md-2 text-center"> <span class="stat-title">999</span><br />text </div> <div class="col-xs-6 col-sm-3 col-md-1 text-center"> <img src="http://placehold.it/50x50" /> </div> <div class="col-xs-6 col-sm-3 col-md-2 text-center"> <span class="stat-title">999</span><br />text </div> <div class="col-xs-6 col-sm-3 col-md-1 text-center"> <img src="http://placehold.it/50x50" /> </div> <div class="col-xs-6 col-sm-3 col-md-2 text-center"> <span class="stat-title">999</span><br />text </div> <div class="col-xs-6 col-sm-3 col-md-1 text-center"> <img src="http://placehold.it/50x50" /> </div> <div class="col-xs-6 col-sm-3 col-md-2 text-center"> <span class="stat-title">999</span><br />text </div> </div> </div>
i believe because height of divs different. image 50px while text less, when bootstrap puts them in columns, sees right column shorter left, it'll put next image (2nd) under 1st text block.
if should work.
*in essence, have make sure heights of divs equal
div.text-center{ min-height: 50px; }<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-3 col-md-1 text-center"> <img src="http://placehold.it/50x50" /> </div> <div class="col-xs-6 col-sm-3 col-md-2 text-center"> <span class="stat-title">999</span><br />text </div> <div class="col-xs-6 col-sm-3 col-md-1 text-center"> <img src="http://placehold.it/50x50" /> </div> <div class="col-xs-6 col-sm-3 col-md-2 text-center"> <span class="stat-title">999</span><br />text </div> <div class="col-xs-6 col-sm-3 col-md-1 text-center"> <img src="http://placehold.it/50x50" /> </div> <div class="col-xs-6 col-sm-3 col-md-2 text-center"> <span class="stat-title">999</span><br />text </div> <div class="col-xs-6 col-sm-3 col-md-1 text-center"> <img src="http://placehold.it/50x50" /> </div> <div class="col-xs-6 col-sm-3 col-md-2 text-center"> <span class="stat-title">999</span><br />text </div> </div> </div>
Comments
Post a Comment