我正在尝试将每个图像对齐到“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>
有什么理由吗?
2 回答
要在Bootstrap中将div彼此相邻对齐,可以使用列 . 连续有12列,因此在下面的示例中,我使用
col-xs-4
类将每个元素放入4宽 .我还将
img-responsive
类添加到两个图像中,以便它们在较小的设备上正确缩小 .这是一个工作小提琴链接:https://jsfiddle.net/88ebLj7e/
您可以在此处找到有关Bootstrap网格的更多信息:https://getbootstrap.com/examples/grid/
<p>
标记位于pull-left
类之外 . 这就是让它看起来像是div的原因 . 当你使用pull-left
. 所有人都应该在课堂上 . 根据您的密码,<p><small>
属于wrapper2
而不是pull-left
或pull-right
.如果您需要更灵活的使用,可以使用James Ives建议的内容 . 否则,您应该将其更改为:
Add 样式表中的一行如下:
所以,你现在需要的是决定
padding-left
值 . 希望,它有所帮助 .