bootstrap网格系统不适用于所有设备大小 [英] bootstrap grid system does not work on all devices size

问题描述

我面对一个非常奇怪的问题与bootstrap。据我所知bootstrap网格系统是基于12个单位，并与任何设备大小，如i-phone ...
我有一个非常简单的横幅，由5列如下：

col-xs-1 | col-xs-1 | col-xs-8 | col-xs-1 | col-xs-1

所以我希望所有上面的列适合行，他们是12.你可以看到在我提供的小提琴，当我使用chrome模拟器，并把它放在类似iphone 5的最后一列转到下一行，它不适合行。

代码（我使用w3school编辑器，因为我使用jsfiddle和代码笔添加元标记他们不应用它，w3school中的编辑器是唯一可以复制我的问题

更多的解释这只发生当我在我的页面中添加以下元标记时：

 < meta name =viewport
 content = width = device-width，user-scalable = yes，initial-scale = 1.0，maximum-scale = 1.0，minimum-scale = 1.0> 
   
 
 
 
 
 
现在这对我来说是一个大问题，因为这是我的布局的基础，请确保基座设置正确。任何人都可以帮忙吗？
  ******************* CODE ***************************** 
 
<！DOCTYPE html> 
< html> 
< head> 
< meta name =viewport
 content =width = device-width，user-scalable = no，initial-scale = 1.0，maximum-scale = 1.0，minimum-scale = 1.0 ; 
< meta http-equiv =X-UA-Compatiblecontent =ie = edge> 
< link rel =stylesheet
 href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
 integrity = sha384- BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u
 crossorigin =anonymous> 
 
<！ - 可选主题 - > 
< link rel =stylesheet
 href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap- theme.min.css
 integrity =sha384- rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl / Sp
 crossorigin =anonymous> 
 
< script 
 src =https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js> < / scripts> 
<！ - 最新编译和缩小的JavaScript  - > 
< script 
 src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
 integrity =sha384- Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa
 crossorigin =anonymous>< / script> 
 
< style> 
 / * ---------------------- HEADER --------------------- ------------------------------------ * / 
 .header {
字体-weight：bold; 
 background-color：＃4070CB; 
 color：＃EFF0F2; 
 height：100px; 
 padding-top：15px; 
} 
 
 .col {
 padding：0 0 0 0; 
} 
 
 .header a {
 color：white; 
 font-size：5vw; 
} 
 
 .txt-align-right {
 text-align：right; 
} 
 
 .txt-align-left {
 text-align：left; 
} 
 
 .txt {
 align-items：center; 
 display：flex; 
 text-align：center; 
 justify-content：center; 
} 
 
 .font-size-xs {
 font-size：4vw; 
} 
< / style> 
< / head> 
< body> 
< div id =mainContainerclass =container-fluid> 
<！ -  Header  - > 
< div class =row> 
< div class =col-xs-12 header> 
< div class =col-xs-1>< / div> 
< div class =col-xs-2 txt-align-left> 
< a href =＃id =menuClick> < span 
 class =glyphicon glyphicon-align-justify>< / span> 
< / a> 
< / div> 
< div class =col-xs-6 txt font-size-xs> TTTTTT-TTTTT< / div> 
< div class =col-xs-2 txt-align-right> 
< a href =＃> < span class =glyphicon glyphicon-phone>< / span> 
< / a> 
< / div> 
< div class =col-xs-1>< / div> 
< / div> 
< / div> 
 
 
< / div> 
 
 
< / body> 
< / html> 
  
 
 
解决方案
我想我完成了你要找的。 / p> 
 
 
我编辑了您的示例。您可以这里查看。
 
 
 
我摆脱了填充引导添加到列，所以任何东西应该适合在屏幕上，即使在较小的分辨率。你应该看看你的中心列。您可以尝试添加一个最小高度，以便在较低的屏幕分辨率下表现正常。
 
 
 
此外，我将第一列更改为偏移量。 查看引导文档 
 
 
 
在技术上，你可以摆脱最后一列。您不必添加到精确的12列。你应该认为它是最大。 12列。 
 
 
 
而不是
 < meta name =viewport
 content =width = device-width，user-scalable = yes，initial-scale = 1.0，maximum-scale = 1.0，minimum-scale = 1.0> 
  
您可以使用
 < meta name =viewport
 content =width = device-width，user-scalable = no，initial-scale = 1.0，maximum-scale = 1.0 
  
您不需要将所有设置为1.0，您可以简单地设置 -scalable = no 并移除'minimum-scale = 1.0' 
 
I am facing a very strange issue with bootstrap. As far as I know bootstrap grid system is based on 12 units and works with any device size such as i-phone... 
I have a very simple banner which consists of 5 columns as follows:

col-xs-1  |  col-xs-1  |  col-xs-8  |col-xs-1| col-xs-1

So I expect that all of the above columns fit into the row since in total they are 12. As you can see in the fiddle I provided when I use chrome emulator and put it on something like iphone 5 the last column goes to the next row and it does not fit the row.

code(I used w3school editor since when I use jsfiddle and code pen to add meta tag they do not apply it and the editor in w3school was the only one could replicate my problem 

For more explanation this only happens when I add the following meta tag into my page:
<meta name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">


Now it is a big issue for me and I am stuck since this is a base of my layout and I want to make sure the base is set up correctly. Can anyone help?
*********************MY CODE*****************************

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-     scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-   BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-    theme.min.css"
integrity="sha384-  rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">        </script>
<!-- Latest compiled and minified JavaScript -->
 <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-  Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>

   <style>
   /*----------------------HEADER ---------------------------------------------------------  */
 .header {
font-weight: bold;
background-color: #4070CB;
color: #EFF0F2;
height: 100px;
padding-top: 15px;
}

.col {
padding: 0 0 0 0;
}

.header a {
color: white;
font-size: 5vw;
}

.txt-align-right {
   text-align: right;
}

.txt-align-left {
  text-align: left;
 }

.txt {
  align-items: center;
    display: flex;
  text-align: center;
  justify-content: center;
}

.font-size-xs {
   font-size: 4vw;
 }
 </style>
 </head>
 <body>
<div id="mainContainer" class="container-fluid">
    <!-- Header -->
    <div class="row">
        <div class="col-xs-12 header">
            <div class="col-xs-1"></div>
            <div class="col-xs-2 txt-align-left">
                <a href="#" id="menuClick"> <span
                    class="glyphicon glyphicon-align-justify"></span>
                </a>
            </div>
            <div class="col-xs-6 txt font-size-xs">TTTTTT-TTTTT</div>
            <div class="col-xs-2 txt-align-right">
                <a href="#"> <span class="glyphicon glyphicon-phone"></span>
                </a>
            </div>
            <div class="col-xs-1"></div>
        </div>
    </div>


</div>


</body>
   </html>

解决方案
I think I accomplished what you are looking for.

I edited your example. You can take a look here.

I got rid of the padding bootstrap adds to the columns so everthing should fit on the screen even on smaller resolutions. You should take a look at your center column. You could try adding a min-height so it should behave normal on lower screen resolutions.

Also I changed the first column to an offset. Take a look at the bootstrap docs.

Technically you can get rid of the last column. You don't have to add up to exact 12 columns. You should think of it as max. 12 columns. With an column offset of 1 und the following 10 columns you are good to go.

Instead of
<meta name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
You can go with
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
You don't need to set everything to 1.0 you can simply set user-scalable=no and remove ´minimum-scale=1.0´

                        
这篇关于bootstrap网格系统不适用于所有设备大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！