html - 如何让 Bootstrap 容器与另一个 div 保持内联？

Question

目前，我的网页顶部是这样的:

我正在尝试使用 Bootstrap 而不是 CSS，因为有人告诉我它更简单(但是到目前为止，我正在努力使它像 CSS 一样屈服于我的意志)。我有一个包含 Logo 和标题的 div，以及一个带有一组用于共享网站的按钮列表的 Bootstrap 容器。我希望按钮与 Logo 内联显示在页面的右侧。

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 放在另一个 div 中，但是由于某种原因，这导致我的按钮是垂直的，并且仍在 Logo 下方。

我愿意接受所有建议，包括告诉我我的做法完全错误。提前致谢。

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

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