如何獲得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; 
} 

，因爲你需要你可以風格的利潤率和文本的對齊的其餘部分。