如何获得Bootstrap容器与其他div保持内联？

Question

目前，我的网页的顶部看起来是这样的：

我想，而不是使用CSS引导，因为我被告知这是更简单的（但是到目前为止，我挣扎弯曲这对我来说就像CSS一样）。我有一个包含徽标和标题的div，以及带有一组按钮的Bootstrap容器以共享网站。我希望按钮与徽标内嵌在页面的右侧。

HTML：

<div class="headerDiv" style="display: inline"> 
     <div> 
      <img id="logo" src="{% static "images/logo.jpg" %}" alt="Fact or Fiction Logo" /> 
     </div> 
     <div class="titleDiv"> 
      <h1 id="title">FACTorFICTION</h1> 
     </div> 
    </div> 
    <div class="container" style="display: inline"> 
     <div class="row"> 

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
       <div class="list-group list-group-horizontal"> 
        <script> 
         function fbs_click() { 
          u = location.href; 
          t = document.title; 
          window.open 
          ('http://www.facebook.com/sharer.php?u=' + 
          encodeURIComponent(u) + '&t=' + encodeURIComponent(t), 
          'sharer', 'toolbar=0,status=0,width=626,height=436'); 

          return false; 
         } 
        </script> 
        <a class="list-group-item" href="http://www.facebook.com/share.php?u=http://www.example.com/" onclick="return fbs_click()" target="_blank"> 
        <img src="{% static "images/facebook.jpg" %}" alt="Share to Facebook."> 
        </a> 

        <a class="list-group-item" href="https://twitter.com/home?status=http://www.example.com/" onclick="window.open('https://twitter.com/home?status=Fact Or Fiction http://www.example.com/; return false;"> 
        <img src="{% static "images/twitter.jpg" %}" alt="Share to Twitter."> 
        </a> 

        <a class="list-group-item" href="https://plus.google.com/share?url=http://www.example.com/" onclick="window.open('https://plus.google.com/share?url=http://www.example.com/',null,'height=626,width=436,status=yes,toolbar=no,menubar=no,location=no'); return false;" target="_blank"> 
        <img src="{% static "images/googleplus.jpg" %}" alt="Share to Google Plus."> 
        </a> 

        <a class="list-group-item" href="http://www.reddit.com/submit" onclick="window.open('http://www.reddit.com/submit?url=http://www.example.com/',null,'height=900,width=750,status=yes,toolbar=no,menubar=no,location=no'); return false;"> 
        <img src="{% static "images/reddit.jpg" %}" alt="Share to Reddit."> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 

CSS：

.list-group-horizontal .list-group-item { 
display: inline-block; 
} 
.list-group-horizontal .list-group-item { 
    margin-bottom: 0; 
    margin-left:-4px; 
    margin-right: 0; 
} 
.list-group-horizontal .list-group-item:first-child { 
    border-top-right-radius:0; 
    border-bottom-left-radius:4px; 
} 
.list-group-horizontal .list-group-item:last-child { 
    border-top-right-radius:4px; 
    border-bottom-left-radius:0; 
} 

.headerDiv { 
    float: left; 
    padding-top: 10px; 
    padding-left: 10px; 
    padding-right: 10px; 
    margin-bottom: 5px; 
    margin-right: 5px; 
} 

.headerDiv div { 
    display:table-cell; 
} 

.titleDiv { 
    position: relative; 
    top: 30px; 
    width:100%; 
} 

我试图把两个div内的另一个，但由于某种原因，这使我的按钮是垂直的，并且仍然在标识下方。

我接受所有的建议，包括告诉我，我正在做这个完全错误的。提前致谢。

Answer 1

只要您了解基本概念和基本结构，Bootstrap就很容易。它通常有一个容器的结构，并且在每一行内，你可以有几个列。考虑到这一点，这是因为这很容易：

<div class="container"> 
    <div class="row"> 
     <div class="headerDiv col-xs-4"> 
     <img src="https://placehold.it/200x50"> 
     <h1 id="title">Company Name</h1> 
     </div> 

     <div class="list-group list-group-horizontal col-xs-8"> 
     <a href="#"><img src="https://placehold.it/80x20"></a> 
     <a href="#"><img src="https://placehold.it/80x20"></a> 
     <a href="#"><img src="https://placehold.it/80x20"></a> 
     <a href="#"><img src="https://placehold.it/80x20"></a> 
     </div> 
    </div> 
</div> 

用最小的造型为：

.headerDiv { 
    display:inline; 
    float:left; 
} 
h1#title { 
    display:inline; 
} 
.list-group { 
    float: right; 
} 

，因为你需要你可以风格的利润率和文本的对齐的其余部分。