All geek questions in one place

Bootstrap Fill Error

I have a problem when I try to wrap a well around several grid elements. I'm not sure if this works like that out of the box or I'm not sure where to place the well class.

http://jsfiddle.net/AdamFollett/9xS8Y/1/

<div class="container"> <div class="row"> <div class="span6"> <div class="well"> <div class="row"> <div class="span3"> 55 Fake Street<br /> St. Johns<br/> A1E3A2<br/> </div> <div class="span3"> more Info<br /> Blah Blah<br/> Blah<br/> <input type="button" class="btn btn-primary" value="Use Location" /> </div> </div> <div class="row"> <div class="span6"> <img alt="googlemap" class="googlemap" src="https://maps.google.com/maps/api/staticmap?center=43.221805,-79.858946&zoom=14&size=320x240&maptype=roadmap&markers=color:red|43.221805,-79.858946&sensor=false" /> </div> </div> </div> </div> </div> </div>

Two span3 elements will not fit correctly when the well class is included. Am I not using the class correctly or do I need to add my own CSS to fix this?

thanks

+4
source share
1 answer

The problem is the DIV with the well class, which I think because it takes up the entire length of the string, and then you have 2 span3 inside, taking up more space than well . (not sure I'm clear enough)

However, if you replace your inner row class with a row-fluid and set the two inner DIV classes to span6 , it should display as you want:

  <div class="row-fluid"> <div class="span6">55 Fake Street <br />Fake Town <br/>A1B2C3 <br/> </div> <div class="span6">more Info <br />Blah Blah <br/>Blah <br/> <input type="button" class="btn btn-primary" value="Use Location" /> </div> </div>

I played the fiddle here .

+2
source

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

More articles:


All Articles