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模板部分问题

回答

相关问题