如何定位Twitter Bootstrap <768px和480px斷點

我期待了解如何定位768px以下的屏幕尺寸，特別是480px的尺寸。我目前正在嘗試創建一個頁面，顯示3個不同網站的3個標誌，這個效果很好，但在達到768px以下時會下降。如何定位Twitter Bootstrap <768px和480px斷點

我的HTML代碼：

<!doctype html> 
<html> 
    <head> 
     <title>Bootstrap Layout</title> 
     <link rel="stylesheet" href="custom.css"> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

     <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="darkbg col-sm-4 col-xs-12"><img src="logo1.jpg"/></div> 
       <div class="darkerbg col-sm-4 col-xs-12"><img src="logo2.jpg"/></div> 
       <div class="darkestbg col-sm-4 col-xs-12"><img src="logo3.jpg"/></div> 
      </div> 
     </div> 
     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    </body> 
</html>

我的CSS：

/* custom stylesheet */ 

.darkbg { 
    background: #999; 
    text-align:center; 
} 

.darkbg img, 
.darkerbg img, 
.darkestbg img { 
    width:100%; 
    } 

.darkerbg { 
    background: #666; 
    text-align:center; 
} 

.darkestbg { 
    background: #333; 
    text-align:center; 
}

當我使用類「COL-XS-12」的標誌顯得過於大屏幕上的問題在於和這應該與col-sm相似，並分佈在4列col-xs-4上。這解決了這個問題，但是當我到達480px的斷點時，那麼標誌看起來太小了，據我所知，最低斷點是col-xs，其目標是768px的屏幕尺寸，所以我不知道我能如何解決這個問題問題。

據我所知，我可以使用媒體查詢，但稍微混淆了我需要寫什麼代碼來顯示每個徽標在彼此頂部達到480px的大小。

如果有人可以請指教，真的很感激它。

來源

2015-11-01 Michael Owen

這裏有3個示例代碼片段。根據您的最終需求，其中一種可能會有所幫助，您也可以隨時創建Bootstrap的自定義版本。

網格示例），你可以在不使用網格調整圖像@ 480像素等

1）：建立一個簡單的類來顯示屬性更改@ 480像素和調整，但是你想在任何斷點等圖像

2）與例1相同，但圖像設置爲100％寬度@ 480px。

查看整頁的示例代碼段。

.darkbg, 
 
.darkbg.img-thumbnail { 
 
    background: #999; 
 
} 
 
.darkerbg, 
 
.darkerbg.img-thumbnail { 
 
    background: #666; 
 
} 
 
.darkestbg, 
 
.darkestbg.img-thumbnail { 
 
    background: #333; 
 
} 
 
/**Grid**/ 
 

 
@media (max-width: 768px) { 
 
    .img-block { 
 
    text-align: center; 
 
    } 
 
    .img-block img { 
 
    width: 150px; 
 
    } 
 
} 
 
/**One**/ 
 

 
.img-block-one img { 
 
    display: inline-block; 
 
    width: 30%; 
 
    padding: 5px; 
 
    margin: 10px; 
 
} 
 
@media (max-width: 480px) { 
 
    .img-block-one img { 
 
    display: block; 
 
    width: 50%; 
 
    margin: 5px auto; 
 
    } 
 
} 
 
/**Two**/ 
 

 
.img-block-two img { 
 
    display: inline-block; 
 
    width: 30%; 
 
    padding: 5px; 
 
    margin: 10px; 
 
} 
 
@media (max-width: 480px) { 
 
    .img-block-two img { 
 
    display: block; 
 
    width: 100%; 
 
    margin: 10px 0; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <h2 class="text-center">Grid Example</h2> 
 

 
    <div class="row img-block"> 
 
    <div class="col-sm-4 col-xs-12"> 
 
     <img src="http://placehold.it/350x350/eee/000" class="img-responsive img-thumbnail darkbg" /> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-12"> 
 
     <img src="http://placehold.it/350x350/eee/000" class="img-responsive img-thumbnail darkerbg" /> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-12"> 
 
     <img src="http://placehold.it/350x350/eee/000" class="img-responsive img-thumbnail darkestbg" /> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <h2 class="text-center">Example One</h2> 
 

 
    <div class="img-block-one text-center"> 
 
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkbg" /> 
 
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkerbg" /> 
 
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkestbg" /> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <h2 class="text-center">Example Two</h2> 
 

 
    <div class="img-block-two text-center"> 
 
    <img src="http://placehold.it/350x350/ff0/000" class="img-responsive darkbg" /> 
 
    <img src="http://placehold.it/350x350/ff0/000" class="img-responsive darkerbg" /> 
 
    <img src="http://placehold.it/350x350/ff0/000" class="img-responsive darkestbg" /> 
 
    </div> 
 
</div> 
 
<hr>

下面有與例如垂直和水平中心的。我將這些規則放置在媒體查詢中，因此它們只能在480px以上工作，因爲它可能會或可能不會有利於在較小設備上進行這種顯示：媒體查詢本身可以被刪除，因爲它不會改變任何其他內容。這些也是新img-block-one類的寬度組件，可以根據您的需要進行調整。

希望這會有所幫助。

.darkbg { 
 
    background: #999; 
 
} 
 
.darkerbg { 
 
    background: #666; 
 
} 
 
.darkestbg { 
 
    background: #333; 
 
} 
 
.img-block-one img { 
 
    display: inline-block; 
 
    width: 30%; 
 
    padding: 5px; 
 
    margin: 10px; 
 
} 
 
@media(min-width: 481px) { 
 
    .img-block-one { 
 
    width: 65%; 
 
    top: 50%; 
 
    left: 50%; 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    } 
 
} 
 
@media (max-width: 480px) { 
 
    .img-block-one img { 
 
    display: block; 
 
    width: 50%; 
 
    margin: 5px auto; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="img-block-one text-center"> 
 
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkbg" /> 
 
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkerbg" /> 
 
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkestbg" /> 
 
    </div> 
 
</div>

來源

2015-11-02 01:11:44 vanburen

感謝範伯倫，例子1出色地工作，只是我想要的方式。順便說一句，讓所有圖像與頁面高度垂直對齊以便它位於中心的最佳方式是什麼？只是爲了我的學習，所以會熱衷學習。 –

很高興它爲你工作，並看到關於居中的額外答案。 – vanburen

再次感謝vanburen，非常感謝。 –

可能最簡單的解決方案是給.row > .col-* div display: block規則的寬度低於480px。這將迫使他們每個人都採取整行（一個在另一個之上）。

像這樣的東西應該工作：

@media (max-width: 480px) { 
    .row .col-xs-12 { 
    display: block; 
    } 
}

（注：不通過心臟知道，但它是可能的，你可能爲了覆蓋默認的引導規則需要選擇具有更高特異性）

有用的鏈接：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

來源

2015-11-01 23:55:58 Shomz

感謝shomz，如果對不起，我的聲音升技傻了。因此，如果我將col-xs-12更換回col-xs-4，並且當尺寸達到480px時，徽標將會堆疊在彼此之上？ –

不客氣，不要對不起 - 我們都在這裏學習。我不確定他們中的任何一個人能夠自己工作在480像素以下。無論您決定使用哪種方式，請確保您選擇它們以應用display：block規則......也許您可以使用'.row div'選擇器並且不用擔心類名稱。 – Shomz

如何定位Twitter Bootstrap <768px和480px斷點

回答

相關問題