如何获得Bootstrap容器与另一个div保持内联？

Question

当前，我的网页顶部看起来像这样：

有人告诉我它试图更简单地尝试使用Bootstrap而不是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;
}

您可以根据需要设置其余的边距样式和文本对齐方式。