Html 引导网格系统不能在所有大小的设备上工作
我面临着一个非常奇怪的引导问题。据我所知，引导网格系统是基于12个单位，并与任何设备的大小，如手机工程。。。 我有一个非常简单的横幅，由以下5列组成： col-xs-1 | col-xs-1 | col-xs-8 | col-xs-1 |col-xs-1 因此，我希望上面所有的列都适合这一行，因为它们总共是12列。正如您在我使用chrome emulator并将其放在类似iphone 5的东西上时提供的小提琴中所看到的，最后一列转到下一行，它与该行不符 有关更多说明，仅当我将以下元标记添加到我的页面时，才会发生这种情况：Html 引导网格系统不能在所有大小的设备上工作,html,twitter-bootstrap,css,Html,Twitter Bootstrap,Css,我面临着一个非常奇怪的引导问题。据我所知，引导网格系统是基于12个单位，并与任何设备的大小，如手机工程。。。 我有一个非常简单的横幅，由以下5列组成： col-xs-1 | col-xs-1 | col-xs-8 | col-xs-1 |col-xs-1 因此，我希望上面所有的列都适合这一行，因为它们总共是12列。正如您在我使用chrome emulator并将其放在类似iphone 5的东西上时提供的小提琴中所看到的，最后一列转到下一行，它与该行不符 有关更多说明，仅当我将以下元标记添加到我
<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>
*********************我的代码*****************************
/*----------------------标题------------------------------------------*/
.标题{
字体大小：粗体；
背景色：#4070CB；
颜色：#EFF0F2；
高度：100px；
填充顶部：15px；
}
上校{
填充：0；
}
.标题a{
颜色：白色；
字体大小：5vw；
}
.txt右对齐{
文本对齐：右对齐；
}
.txt左对齐{
文本对齐：左对齐；
}
.txt{
对齐项目：居中；
显示器：flex；
文本对齐：居中；
证明内容：中心；
}
.字体大小xs{
字体大小：4vw；
}
TTTTTT-TTTTT
您唯一使用的是“xs”，这意味着在引导中有四种不同的“网格大小”。
你唯一使用的是“xs”，意思是我想我完成了你想要的 我编辑了你的例子。你可以看看 我去掉了添加到列中的填充引导，这样即使在较小的分辨率下，屏幕上的所有内容都应该适合。你应该看看你的中柱。您可以尝试添加一个最小高度，以便它在较低屏幕分辨率下正常工作 我还将第一列更改为偏移量 从技术上讲，你可以去掉最后一列。你不必加起来精确到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<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，您只需设置
用户可缩放=否