使用引导程序时，徽标和Facebook链接图标未正确对齐

Question

我正在使用twitter bootstrap来设计一个网站我首先设计了徽标和标题，但是当我给出margin-left时，徽标没有对齐到左边：-200px它对齐左边但是当我缩小屏幕尺寸时，然后在屏幕中央看不到徽标。请提出一些解决方案。

 <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到hav完美对齐，这里我给了4个网格标识和8个网格列表）

此外，引导程序还有class="container" and not id="container"，因此class="container"添加.row即可正常行动。

要显示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;
}