Twitter Bootstrap模板部分問題

我是新來的HTML，CSS和Javascript。自從幾天以來，我一直在學習Twitter Bootstrap。我使用Twitter Bootstrap重做了此website的基本主頁。Twitter Bootstrap模板部分問題

對於第一次使用計算機，我認爲我做了一份體面的工作。但是，請您給我反饋或更正代碼，以使主頁與上述網頁完全相似。

網頁正在利用最小寬度（移動優先方法）進行媒體查詢。我已經習慣了最大寬度來重做它。

我在製作網頁的第二部分（所有着名品牌的標誌都是）時掙扎了一下。

而且我使用了純文字標識。

請你糾正我或指導我進一步構建網頁（只是主頁）。

謝謝。

請在這裏查看網頁Codepen。我的材料已精選，提及或使用：

   <div class="row"> 
        <div class="col-md-4"> 
        <img class="featured_logos wdd" alt="WebdesignerDepot" src="https://placehold.it/260x68"></div> 
        <div class="col-md-4"> 
         <img class="featured_logos wdd" alt="WebdesignerDepot" src="https://placehold.it/260x68"></div> 
         <div class="col-md-4"> 
         <img class="featured_logos wdd" alt="WebdesignerDepot" src="https://placehold.it/260x68"></div> 
         </div> 

        </div> 
        </div>

來源

2017-01-16 Amitsharma

歡迎來到Stack Overflow！請查看我們的[SO問題清單]（http://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist）來幫助你提出一個好問題，從而得到一個很好的答案。 –

我認爲這是您不想使用列或單獨行的區域的一個很好的示例。爲了讓他們在房間用完時彈出到位，你只需要讓他們全部排好就行了。我推薦這樣的：

<div class="row"> 
    <div class="col-xs-12"> 
     <img class="featured_logos wdd" alt="WebdesignerDepot" src="https://placehold.it/260x68"> 
     <img class="featured_logos wdd" alt="WebdesignerDepot" src="https://placehold.it/260x68"> 
     <img class="featured_logos wdd" alt="WebdesignerDepot" src="https://placehold.it/260x68"> 
     <img class="featured_logos wdd" alt="WebdesignerDepot" src="https://placehold.it/260x68"> 
     <img class="featured_logos wdd" alt="WebdesignerDepot" src="https://placehold.it/260x68"> 
     <img class="featured_logos wdd" alt="WebdesignerDepot" src="https://placehold.it/260x68"> 
     <img class="featured_logos wdd" alt="WebdesignerDepot" src="https://placehold.it/260x68"> 
     <img class="featured_logos wdd" alt="WebdesignerDepot" src="https://placehold.it/260x68"> 
    </div> 
</div> 

.featured_logos { 
    margin: 10px 25px; 
    vertical-align: middle; 
    max-width: 60%; 
    height: 40px; 
}

來源

2017-01-16 19:41:58 Benneb10

謝謝@ Benneb10。有效。你是如何設法在第一排和第三排中獲得五個徽標的？這是他們在桌面上查看時的堆疊方式。 – Amitsharma

嘿@Amitsharma這就是它的工作原理。容器的固定寬度爲1170px，行和col-xs-12全部佔據了這個尺寸的100％。每個徽標寬152px，邊距25px。這使他們每個約202px。 202 X 5 = 1010.第六個標識被強制設置爲新行，因爲它在上面的行上沒有足夠的空間。 – Benneb10

這解釋了@ Benneb10。謝謝。 – Amitsharma

Twitter Bootstrap模板部分問題

回答

相關問題