Question

我是HTML，CSS和Javascript的新手。几天以来，我一直在学习Twitter Bootstrap。我使用Twitter Bootstrap重做了这个website的基本主页。

对于第一次计时器，我认为我做得不错。但是，请您给我反馈或更正代码，以使主页与上述网页完全相似。

该网页正在利用最小宽度（移动优先方法）进行媒体查询。我已经习惯了max-width来重做它。

在制作网页的第二部分（着名品牌的所有标识都是）时，我有点挣扎。

我使用的是纯文字徽标。

您能否请您更正或指导我进一步构建网页（仅限主页）。

谢谢。

请在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>

Answer 1

我认为这是一个你不想使用列或单独行的区域的一个很好的例子。当他们用完房间时，为了让他们的过渡突然出现，你需要让他们正确排列。我推荐这样的东西：

 <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;
}

Twitter Bootstrap模板部分问题

1 个答案: