[英]How do I get a Bootstrap container to stay inline with another div?
Currently, the top of my web page looks like this: 当前,我的网页顶部看起来像这样:
I'm trying to use Bootstrap instead of CSS as I was told it was simpler (however so far I'm struggling to bend it to my will just as much as CSS). 有人告诉我它试图更简单地尝试使用Bootstrap而不是CSS(但是到目前为止,我一直在努力将其与CSS一样尽力而为)。 I have a div containing the logo and title, and a Bootstrap container with a list group of buttons to share the website.
我有一个包含徽标和标题的div,以及一个Bootstrap容器和一个用于共享网站的按钮列表组。 I want the buttons to appear on the right hand side of the page inline with the logo.
我希望按钮显示在页面的右侧并与徽标对齐。
HTML: 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: 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%;
}
I have tried putting the two divs inside another, however for some reason this causes my buttons to be vertical, and still beneath the logo. 我尝试将两个div放在另一个中,但是由于某种原因,这会使我的按钮处于垂直状态,并且仍在徽标下方。
I'm open to all suggestions, including telling me that I'm going about this completely wrong. 我愿意接受所有建议,包括告诉我我要彻底解决这个问题。 Thanks in advance.
提前致谢。
Bootstrap is easy as long as you understand the fundamental concept and basic structure. 只要您了解基本概念和基本结构,Bootstrap就很容易。 It general has a structure of a container with rows and within each row, you could have several cols.
它通常具有一个带有行的容器结构,并且在每一行中,您可以有多个列。 With that in mind, it is as easy as this:
考虑到这一点,就这么简单:
<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>
With minimum styling as: 最小样式为:
.headerDiv {
display:inline;
float:left;
}
h1#title {
display:inline;
}
.list-group {
float: right;
}
You can style the rest of margins and alignment of text as you need. 您可以根据需要设置其余的边距样式和文本对齐方式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.