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

我对所有建议都持开放态度，包括告诉我，我对此完全错了。提前谢谢。

Answer 1

只要您了解基本概念和基本结构，Bootstrap就很容易。它通常具有带行的容器结构，并且在每行中，您可以有多个cols。考虑到这一点，它就像这样容易：

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

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

如何让Bootstrap容器与另一个div保持联机？

1 个答案: