Question

我在使用bootstrap时面临一个非常奇怪的问题。据我所知，自举网格系统基于12个单元，适用于任何设备尺寸，如i-phone ...... 我有一个非常简单的横幅，由5列组成，如下所示：

col-xs-1 | col-xs-1 | col-xs-8 | col-xs-1 |的 COL-XS-1

所以我希望所有上面的列都适合这一行，因为它们总共是12个。正如你在小提琴中看到的那样，当我使用chrome模拟器并把它放在像iphone 5这样的东西时，最后一列是下一行，它不适合行。

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

有关详细说明，只有在我将以下元标记添加到页面中时才会发生这种情况：

<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>

Answer 1

我认为我完成了你想要的东西。

我编辑了你的例子。你可以看看here。

我摆脱了填充引导程序添加到列中，因此即使在较小的分辨率下，everthing也应该适合屏幕。你应该看看你的中心专栏。您可以尝试添加最小高度，以便在较低的屏幕分辨率下表现正常。

我还将第一列更改为偏移量。 Take a look at the bootstrap docs.

从技术上讲，你可以摆脱最后一列。您不必添加精确的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并删除'minimum-scale = 1.0'

Answer 2

在bootstrap中有四种不同的＆＃34;网格大小＆＃34;。你唯一使用的是＆＃34; xs＆＃34;是什么意思＆lt; 576px。

如果您想在每种尺寸中使用此网格，则必须添加"col-sm-?"，"col-md-?"，"col-lg-?"和"col-xl-?"。

在这里，您可以阅读引导程序中网格系统的工作原理：

https://v4-alpha.getbootstrap.com/layout/grid/

我认为你现在的问题是比父母更大的内容。对于col-xs-1，你在iPhone 5上有大约27px的圆形。如果你的div中的内容大于27px，那么你的parent-div（col-xs-1）会更大，并且12个列的空间不足了。（内容也可以是文字！）

为了避免它变大，你可以在你的风格中使用overflow:hidden;。这会将溢出减少到父div的大小。

bootstrap网格系统不适用于所有设备大小

2 个答案: