html - 使用 bootstrap 时 Logo 和 Facebook 链接图标未正确对齐

Question

我正在使用 twitter bootstrap 来设计一个网站，首先我正在设计 Logo 和标题，但是当我给 margin-left:-200px 时， Logo 没有左对齐，它左对齐，但是当我减小屏幕尺寸时，则 Logo 在屏幕中央不可见。请提出一些解决方案。

 <div id="container">
      <div id="header">
        <div class="row">
        <div class="col-md-4">
          <div class="logo"><img src="images/header/logo.gif" /></div>
          </div>
           <div class="col-md-12">
          <div class="right_div">
            <div id="social">
              <ul>
                <li><img src="images/links/call.png"/></li>
                <li><img src="images/links/mail.png"/></li>
                <li><img src="images/links/Linkedin_icon.jpg"/></li>
                <li><img src="images/links/p.jpg"/></li>
                <li><img src="images/links/twitter.jpg"/></li>
                <li><img src="images/links/facebook-icon.png"/></li>
              </ul>
            </div>
          </div>
        </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    </div>
    </div>
    </div>

Answer 1

将你的 HTML 改成这样(.row 应该有完美的 12 个网格，即所有 col-* 应该加起来达到 12 才能完美对齐，这里我给了 4 个网格用于 Logo ，8 个网格用于列表)

还有 bootstrap 有 class="container"而不是 id="container" 所以为 .row 添加 class="container" 到正确行事。

要显示 ul li 元素的内联，只需将 display: inline 添加到 li 样式和 list-style: "none" 用于避免 ul

的默认列表样式

Demo

HTML

<div id="container" class="container">
    <div id="header">
        <div class="row">
            <div class="col-md-4 bordr">
                <div class="logo">
                    <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
                </div>
            </div>
            <div class="col-md-8 bordr">
                <div class="right_div">
                    <div id="social">
                        <ul>
                            <li>
                                <img src="http://www.ahmadtea.com/media/socialicons/fb.png" />
                            </li>
                            <li>
                                <img src="http://www.ahmadtea.com/media/socialicons/fb.png" />
                            </li>
                            <li>
                                <img src="http://www.ahmadtea.com/media/socialicons/fb.png" />
                            </li>
                            <li>
                                <img src="http://www.ahmadtea.com/media/socialicons/fb.png" />
                            </li>
                            <li>
                                <img src="http://www.ahmadtea.com/media/socialicons/fb.png" />
                            </li>
                            <li>
                                <img src="http://www.ahmadtea.com/media/socialicons/fb.png" />
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS/* 边框仅供理解 */

li {
    display:inline;
}
ul {
    list-style:none;
}
.bordr {
    border:1px solid black;
}

.logo, #social {
    text-align:center;
}