twitter-bootstrap 在 div bootstrap 中对齐段落的左右图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34279515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align an image left and right of paragraph in div bootstrap
提问by Kevin K
I'm trying to align each image to the left and right of the text in the "wrapper2 panel-footer center-block" div. It correctly aligns the left image, but the right image is actually going "under" the div for some reason.
我正在尝试将每个图像与“wrapper2 panel-footer center-block”div 中文本的左侧和右侧对齐。它正确地对齐了左侧图像，但由于某种原因，右侧图像实际上位于 div 的“下方”。
.wrapper2 {
max-width: 800px;
float: none;
margin: 0 auto;
}<div class="wrapper2 panel-footer center-block">
<div class="pull-left">
<img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" />
</div>
<p><small>Copyright © All Rights Reserved.</small>
</p>
<div class="pull-right">
<img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" />
</div>Any reason for this?
这有什么原因吗？
回答by James Ives
To align divs next to each other in Bootstrap you utilize columns. There are 12 columns in a row, so in the example below I put each element in a 4 wide using the col-xs-4class.
要在 Bootstrap 中将 div 彼此对齐，您可以使用列。一行中有 12 列，因此在下面的示例中，我使用col-xs-4类将每个元素放在 4 宽中。
I also added the img-responsiveclass to both of the images so they scale down correctly on smaller devices.
我还将img-responsive该类添加到两个图像中，以便它们在较小的设备上正确缩小。
<div class="wrapper2 panel-footer">
<div class="col-xs-4">
<div class="pull-left"><img class="img-responsive" alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
<div class="col-xs-4">
<p><small>Copyright © All Rights Reserved.</small></p>
</div>
<div class="col-xs-4">
<div class="pull-right"><img class="img-responsive" alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
</div>
Here's a working fiddle link: https://jsfiddle.net/88ebLj7e/
这是一个有效的小提琴链接：https: //jsfiddle.net/88ebLj7e/
You can find more information on the Bootstrap grid here: https://getbootstrap.com/examples/grid/
您可以在此处找到有关 Bootstrap 网格的更多信息：https: //getbootstrap.com/examples/grid/
回答by Herman Nz
<p>Tag is outside the pull-leftclass. That's what made it looks "under" the div. When you use pull-left. all should be INSIDE the class.
From your codes, <p><small>belongs to wrapper2not pull-leftor pull-right.
<p>标签在pull-left课外。这就是使它看起来“在”div 下的原因。当您使用pull-left. 所有的都应该在班级里面。从您的代码来看，<p><small>属于wrapper2notpull-left或pull-right.
If you need more flexible usage, you can use what James Ives suggest. Otherwise, you should change it into like this:
如果您需要更灵活的使用，您可以使用 James Ives 的建议。否则，你应该把它改成这样：
Addone line in your stylesheet as follows:
在样式表中添加一行，如下所示：
<style>
.wrapper2 p{float:left; padding-left:30%;}
</style>
<div class="wrapper2 panel-footer center-block">
<div class="pull-left"><img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
<p><small>Copyright © All Rights Reserved.</small></p>
<div class="pull-right"><img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
So, what you need now is to decide padding-leftvalue.
Hopes, it helps.
所以，你现在需要的是决定padding-left价值。希望，它有帮助。
