ブートストラップコンテナを別のdivとインラインでつなぐにはどうすればよいですか？

Question

現在、私のWebページの最上部には、次のようになります。

私が代わりに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%; 
} 

私はロゴの下にまだこれは私のボタンが垂直になり、いくつかの理由が、別の内部で2つのdivを入れてみました、としています。

私はこのことについて完全に間違っていると言っていますが、私はすべての提案を受け付けています。前もって感謝します。

Answer 1

基本的な考え方と基本構造を理解している限り、ブートストラップは簡単です。一般的に、行を持つコンテナの構造を持ち、各行に複数のcolを持つことができます。このことを念頭に置いて、それがこのように簡単です：

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

。