All geek questions in one place

Twitter Boot Issues - Container Overflow Elements When Resizing a Zoom Window Using Responsiveness

I am currently exploring the use of Twitter bootstrap as a basis for future web development projects for clients. I went through all the standard documentation on my Github page and, as I understand it, for efficient use of the grid, your rows should contain only twelve columns (consisting of different elements or one element).

With that in mind, I did a little test with some text spanning 4 columns in a row, as well as a div offset spanning 6 columns. This seems to work fine, however, I tried to include a single row containing a div spanning 3 columns that are offset by 9 columns (still 12) to give the impression that the content in the div is placed right on the page. The problem is that it looks great when windowed mode is suitable for the desktop, however, when I start to scale the window, the contents of the div are squeezed out of the general container. If I continue to scale the window, the elements will stack as I expect for a mobile view.

My question is: why do they do this? My understanding was that as long as there are 12 columns, the content will remain in the shell inside its outer container.

My code can be found below. There are many built-in csss, but this is just for testing purposes. This is a bootstrap boot with all the options checked during the setup phase, which means that all answer options are included.

<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta name="viewport" content="width-device-width, initial-scale=1.0"> <!--BOOTSTRAP--> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <div class="container-fluid" style="border: 1px solid #cccccc"> <div class="row-fluid"> <div class="span4">This is a div spanning 4 columns</div> <div class="span6 offset2">This is a div spanning 6 columns. It should appear alongside the column spanning 4 columns.</div> </div> <div class="row-fluid"> <div class="span3 offset9"> <form class="form-search"> <div class="row-fluid"> <div class="input-append span2"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> Search </button> </div> </div> </form> </div> </div> </div> </body> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </html>

This happens if I use a fluid layout or not. In the liquid example, the search box will look as if it is coming out of the screen. In a fixed example, it will overlap the gray border of the container.

+6
source share
2 answers

Add your code here: http://bootply.com/66598

The image below shows your problem / question (I think): enter image description here

To understand your problem, you will have to examine the grid and understand the difference between the default grid and the fluid grid, see http://twitter.imtqy.com/bootstrap/scaffolding.html#gridSystem

Your problem will occur on screens larger than 767 pixels. Below the width of the columns (div with class = "span {x}") will drain. On large screens, the problem also fails.

Default Grid (Twitter Bootstrap 2.x) :

When nesting lines, the child line gets the full range, which is summed up to the span of its parent.

Example:

 <div class="row"> <div class="span6"> <!--nesting--> <div class="row"> <div class="span3"></div> <div class="span3"></div> </div> </div> <div class="span6"> </div> </div>

In a grid, span classes have a fixed width in pixels (depending on the width of the screen), see

Screen width 768px and 980px: Each span1 will be 940 - (11 gutters 20px) / 12 = 60px (above 980px (1170-11 * 30) / 12 = 70px).

Now your problem you have set is: <input type="text" class="input-medium search-query"> As an input environment, this input will have a fixed width of 150 pixels and the Search button also takes up space (75px;) . You put this in span2 ( <div class="input-append span2"> ), the witch in gap 3 ( <div class="span3 offset9"> ). In the default 940 grid, the span3 range got a width of 3x60 + 2x20 = 220px; while your seachbox takes 75 + 150 = 225 pixels. For this reason, your Iskander comes out of the grid. This problem will not have span4. Of course, this is also Span2.

Fluid Mesh (Twitter Bootstrap 2.x and Twitters Bootstrap 3) :

In a liquid grid, each column (span {x}) receives a percentage of its parent's width. When nesting a child row can be divided into 12 columns.

Example:

 <div class="row-fluid"> <div class="span6"> <!--nesting--> <div class="row"> <div class="span6">50% of the parent and 25% of the grid</div> <div class="span6">50% of the parent and 25% of the grid</div> </div> </div> <div class="span6"> <div class="row"> <div class="span12">100% of the parent and 50% of the grid</div> </div> </div> </div>

In your case, your search box is nested in span2 in span3. Span 3 will receive about 25% of the grid width. When 25% of your grid width is less than 225px, the search box will exit the grid. So your problem will start with a screen width of 4 x 225 = 900 pixels (just below the default grid of 940 pixels). Also here it will help put your search query in the range of 4 or 5. NOTE <div class="input-append span2"> will have a width of 16.6% from 25% (very small).

Possible Solution. Use the pull-right class for the search query :

  <div class="row-fluid"> <div class="span3 offset9"> <form class="form-search"> <div class="input-append pull-right"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> Search </button> </div> </form> </div> </div>
+4
source

I had a similar case. Switchable from container (fixed width) to container fluid (full width) This worked for me. Good luck.

Fluid or fixed-grid system in a flexible design based on Twitter Bootstrap

http://getbootstrap.com/css/#grid

+1
source

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

More articles:


All Articles