Why is the container not accepting the desired Bootstrap values?

L

lucaslucky2014-11-01 16:02:42

Bootstrap

lucaslucky, 2014-11-01 16:02:42

Good day. Recently started working with Bootstrap. I'm using version 3.2.0. I ran into a problem - on an iPad with a screen width of 768px, the width of the container should be 750px, but on the iPad it is much narrower. On the ProtoFluid service, everything looks as it should. What could be the problem? I am attaching screenshots. If you need to throw off any code, please, write what exactly. Thank you for attention.
iPad: Normal option:

<body>
<div id="all">
<div id="menu-top">
  <div class="container">
    <div class="row">
    		<div class="menu-top-fonts">
            	<div class="col-lg-2 col-md-2 col-sm-2">регистрация</div>
       			<div class="col-lg-1 col-md-1 col-sm-1">войти</div>
           		<div class="col-lg-2 col-md-2 col-sm-2"></div> 
                <div class="col-lg-5 col-md-5 col-sm-5"></div>
            </div>    
           	    <div class="col-lg-2 col-md-2 col-sm-2">RUS/ENG</div>
    	</div>
    </div>   
</div>
<div class="container">
    <div class="row"><header class="col-lg-12"></header></div>
            
            <div class="row">
         		<div class="navbar">
         			<div class="container">             
         				<div class="navbar-header"></div>
                    	<div class="collapse navbar-collapse">
                    		<ul class="nav navbar-nav">
                        	<li><a class="navbar-fonts" href="#">ГЛАВНАЯ</a></li>
                        	<li><a class="navbar-fonts" href="#">МУЛЬТИМЕДИЯ</a></li>                                        
                       		<li><a class="navbar-fonts" href="#">СОРЕВНОВАНИЯ</a></li>
                       	 	<li><a class="navbar-fonts" href="#">ИНТЕРНЕТ-МАГАЗИН</a></li>
                       		<li><a class="navbar-fonts" href="#">ФОРУМ</a></li>
                       		<li><a class="navbar-fonts" href="#">КОНТАКТЫ</a></li>
                    		</ul>
                   	   </div>
        			 </div>
         		</div>
         </div>  
        <div class="row main-content">
        	<div class="col-lg-3 col-md-3 col-sm-3 column-left">&nbsp </div>
            <div class="col-lg-9 col-md-9 col-sm-9 column-right"> </div>
        </div></div>
 
    
      
</div>
<footer>
    	<div class="row"></div> 
 </footer>
</div>
</body>

@charset "windows-1251";

@media (min-width: 768px) {
body {
  background-color:rgba(38,184,96,1.00);
}

#menu-top {
  background-color:#140d5b;
  height:28px;
  width:100%;
}
header {
  height:196px;
  background-color:rgba(255,0,4,1.00);
}
.navbar {
  height:50px;
  background-color:#140d5b;
}

.column-left {
  background-color:#BBB;
  opacity:0.7;
}
.column-right {
  background-color:#140d5b;
  opacity:0.7;
}

footer {
  height:130px;
  width:100%;
  background:rgba(20,13,91,0.95);
  margin-top:100px;
}
}
/*Начало выравнивания колонок*/
.column-left, .column-right {
  padding-bottom: 20000px;
  margin-bottom: -20000px;
}
.main-content {
  overflow: hidden;
}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

E

Eugene, 2014-11-01
@cyber-jet

let's get the code... don't guess from the photo :)

D

Dmitry Evgrafovich, 2014-11-02
@Tantacula

I wrote a long answer, everything was erased.
Once you use the footer header, then wrap the menu in nav.
See how other sites use these elements. I don't think you are using them very well.
You have an extra closing div below the footer.
try container-fluid instead of container.
when setting column classes, put them in order of increasing resolution (class="col-xs-12 col-sm-2 col-md-4 col-lg-2"), not from largest to smallest. So it's easier to read.
Column classes inherit larger permissions from smaller ones. It makes no sense to write col-sm-2 col-md-2 col-lg-2, you can only write col-sm-2. So cleaner.
Put down col-xs-12 everywhere, where you forgot. Especially in (about wrapping said above)
Check the default examples on the bootstrap site, you may have forgotten to include the viewport in your head.
Compare the original bootstrap templates with yours on the iPad, perhaps where you see the jamb as intended.
remove width:100% wherever it's not needed. Block elements are stretched to full width by default, and your potmo style will accidentally meet with the bootstrap class and you will not understand why the conflict is out of the blue.
Remove div#all, extra wrapper really.
Remove .column-left, .column-right {
padding-bottom: 20000px;
margin-bottom: -20000px;
}
.main-content {
overflow: hidden;
} It's just some shitty code.
I could forget something else from the remote, let smart people write.