Bootstrap列不工作

我是新來的，我試圖將兩張照片並排放置在引導行中，但列似乎沒有工作。我究竟做錯了什麼？預先感謝您的任何幫助！Bootstrap列不工作

<div class="row" style="width: 100%"> 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
    <img src="https://heavyeditorial.files.wordpress.com/2016/02/david-joseph.jpg?quality=65&strip=all&strip=all/200x200" class="img-thumbnail img-responsive" alt="David Joseph"> 
    <p class="caption">David Joseph was unarmed when he was fatally shot by Austin police. <em>Photo credit: APD</em></p> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
    <img src="http://assets.nydailynews.com/polopoly_fs/1.2523996.1454945162!/img/httpImage/image.jpg_gen/derivatives/article_400/observer9n-3-web.jpg" class="img-thumbnail img-responsive" alt="Antronie Scott"> 
    <p class="caption">San Antonio police fatally shot Antronie Scott, who was also unarmed. <em>Photo credit: SAPD</em></p></div> 
</div>

來源

2016-04-27 ERM

其中在關閉div標籤爲行，爲什麼你使用寬度：100％？ –

添加jsfiddle，我們更容易編輯您的代碼:) –

https://jsfiddle.net/#&togetherjs=LLL9w4hbrT – ERM

<div class="col-xs-12"> 
<div class="col-xs-6"> 
    <img src="https://heavyeditorial.files.wordpress.com/2016/02/david-joseph.jpg?quality=65&strip=all&strip=all/200x200" class="img-thumbnail img-responsive" alt="David Joseph"> 
    <p class="caption">David Joseph was unarmed when he was fatally shot by Austin police. <em>Photo credit: APD</em></p> 
</div> 
<div class="col-xs-6"> 
    <img src="http://assets.nydailynews.com/polopoly_fs/1.2523996.1454945162!/img/httpImage/image.jpg_gen/derivatives/article_400/observer9n-3-web.jpg" class="img-thumbnail img-responsive" alt="Antronie Scott"> 
    <p c-lass="caption">San Antonio police fatally shot Antronie Scott, who was also unarmed. <em>Photo credit: SAPD</em></p></div> 
</div> 
</div>

如果你不喜歡用12關口電網，可以將其定義爲任何其他值在這裏：http://getbootstrap.com/customize/

向下滾動到「網格系統」，改變你的需求，向下滾動，編譯並下載您自己的引導;）

來源

2016-04-27 20:06:53 Steffomio

您需要爲所有變體指定相同的CSS列類。

您嘗試列出col-xs-12，將其更改爲col-xs-6。

基本上，每行總共有12列，並且您希望將它們平分，每個div在您的情況下佔用6列寬。

來源

2016-04-27 21:09:56

我以爲我可以在xs中取12列，在其他取6個。爲什麼圖片不會隨着屏幕尺寸的變化而改變？ – ERM

對於您需要添加圖像標籤內類圖像「IMG響應」 :)

來源

2016-04-28 05:11:37

這可能會爲你正在嘗試做的工作：

<div class="container"> 
    <section class="row"> 
     <div class="col-md-6"> 
      <img src="https://heavyeditorial.files.wordpress.com/2016/02/david-joseph.jpg?quality=65&strip=all&strip=all/200x200" class="img-thumbnail img-responsive" alt="David Joseph"> 
      <p class="caption">David Joseph was unarmed when he was fatally shot by Austin police. <em>Photo credit: APD</em></p> 
     </div> 
     <div class="col-md-6"> 
      <img src="http://assets.nydailynews.com/polopoly_fs/1.2523996.1454945162!/img/httpImage/image.jpg_gen/derivatives/article_400/observer9n-3-web.jpg" class="img-thumbnail img-responsive" alt="Antronie Scott"> 
      <p class="caption">San Antonio police fatally shot Antronie Scott, who was also unarmed. <em>Photo credit: SAPD</em></p></div> 
     </div> 
    </section> 
</div>

來源

2016-04-28 05:27:49 slickset

Bootstrap列不工作

回答

相關問題