引导网格系统并不适用于所有设备的大小。
我正面临着一个非常奇怪的问题。据我所知，引导网格系统是基于12个单元，并与任何设备的大小，如我的手机.我有一个非常简单的横幅，由5列组成，如下所示：
col-xs-1区-xs-1区-xs-8区-xs-1col 1
所以我希望上面所有的列都符合行，因为它们总共是12。正如你在小提琴中看到的，当我使用铬仿真器并把它放在像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">
现在这对我来说是个大问题，我被困住了，因为这是我的布局的一个基础，我想确保基地设置正确。有人能帮忙吗？
*********************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>回答 2
Stack Overflow用户
发布于 2016-12-28 14:26:25
我想我完成了你要找的东西。
我编辑了你的例子。你可以看看这里。
我摆脱了填充引导添加到列，所以每件事都应该适合在屏幕上，即使是较小的分辨率。你应该看看你的中心栏。您可以尝试增加一分钟的高度，这样它就应该在低屏幕分辨率上表现正常。
另外，我将第一列更改为偏移量。看看引导文档。
从技术上讲，你可以去掉最后一篇专栏。你不需要加起来精确到12列。你应该把它想成麦克斯。12栏。如果列偏移量为1和以下10列，则可以选择。
而不是
<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，只需设置user-scalable=no并删除“最小规模=1.0”
Stack Overflow用户
发布于 2016-12-28 13:56:13
在引导中有四种不同的“网格大小”。唯一使用的是"xs“，意思是<576 xs。
如果您想使用每个大小的网格，则必须添加"col-sm-?"、"col-md-?"、"col-lg-?"和"col-xl-?"。
在这里，您可以了解引导中的网格系统是如何工作的：
https://v4-alpha.getbootstrap.com/layout/grid/
我认为你在这一点上的问题是内容比它的父母更大。对于col-xs-1，您确实在iPhone 5上有大约27 12。如果您在这个div中的内容大于27 12，它将增大您的父-div (col-xs-1)，并且不再有足够的空间容纳12列。(内容也可以是文本！)
为了避免它变得更大，您可以在您的风格中使用overflow:hidden;。这将将溢出降低到父-div的大小。
https://stackoverflow.com/questions/41363321
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号