引導網格系統無法在所有設備上工作大小

我正在面對一個引導程序很奇怪的問題。據我所知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那麼我在做什麼是對的？ –

引導網格系統無法在所有設備上工作大小

回答

相關問題