All geek questions in one place

How to set up response columns and input fields in twitter bootstrap?

The main question: how to configure bootstrap boot script? My code partially works, but I cannot fix it. It is difficult to explain that for a better understanding I made the visualization presented in the screenshots.

I posted the actual cleared template code on JSFIDDLE .

Now that the width is greater than 1200px columns, this means that they are two span6 side by side: enter image description here Between the 1200px and 980px display should look: enter image description here Less than 979px and more than 768px in the first conflict with navigation. I would like to have something like this in a container center: enter image description here Until the next shrinkage below the right column 768px jumps to a new line and remains there, reducing further to 480 pixels and lower. I think the view below is suitable for mobile devices and improves the appearance in narrow desktop browsers, except that when scaling both columns are not in the center: enter image description here

The smallest width meets my expectations.

+4
source share
1 answer

I'm not sure if I understood your question correctly, but you can customize the behavior using media queries

// Landscape phones and down @media (max-width: 480px) { ... } // Landscape phone to portrait tablet @media (max-width: 767px) { ... } // Portrait tablet to landscape and desktop @media (min-width: 768px) and (max-width: 979px) { ... } // Large desktop @media (min-width: 1200px) { ... }

You may need to rewrite some classes and identifiers. The response information can be found on git:

responsive.less

However, play with these settings only if you really need to.

+9
source

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

More articles:


All Articles