引导网格系统无法在所有设备上工作大小

我正在面对一个引导程序很奇怪的问题。据我所知bootstrap网格系统是基于12个单位，并与任何设备的大小，如我的电话... 我有一个非常简单的横幅，其中包括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标签到我的网页发生了：

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

来源

2016-12-28 Hamed Minaee

您提供的链接不是小提琴链接。 –

你已经给w3schools链接。请提供适当的代码。 –

对不起， –

我想我已经完成了你在找的东西。

我编辑了你的例子。你可以看看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规模= 1.0'

来源

2016-12-28 14:26:25 kkreft

是的你完全解决了我有问题一天。非常感谢，我很高兴在这个论坛上有一些人喜欢你，他们愿意帮助别人，帮助他人:) –

在bootstrap中有四种不同的“网格大小”。您唯一使用的是“xs”，意思是< 576px。

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

在这里你可以了解如何网格系统引导工作：

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

我认为你的问题在这一点上的内容比其母公司大。对于col-xs-1，你在iPhone 5上有27px的大小。如果你的内容大于27px，它会使你的parent-div（col-xs-1）变大并且没有足够的空间用于12列了。（内容也可以是文字！）

为了避免它变大，可以使用overflow:hidden;。这会将溢出限制为你父母的大小。

来源

2016-12-28 13:56:13

感谢您的回答，但我担心的是诸如iphone 5之类的xs设备，但正如您所看到的，虽然我定义了适用于iphone 5的xs 12，但它不起作用 –

您不必设置其他尺寸，如sm或md 。 xs的值将自动应用。 – kkreft

@kkreft那么我在做什么是对的？ –

引导网格系统无法在所有设备上工作大小

回答

相关问题