Question

我正在尝试将每个图像对齐到“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 &copy; 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>

这有什么原因吗？

Answer 1

要在Bootstrap中将div彼此相邻对齐，可以使用列。连续有12列，因此在下面的示例中，我使用col-xs-4类将每个元素放在4列中。

我还在两个图片中添加了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 &copy; 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>

这是一个有用的小提琴链接：https://jsfiddle.net/88ebLj7e/

您可以在此处找到有关Bootstrap网格的更多信息：https://getbootstrap.com/examples/grid/

Answer 2

<p>标记位于pull-left类之外。是什么使它看起来＆＃34;在＆＃34; div。当您使用pull-left时。所有人都应该在课堂上。根据您的密码，<p><small>属于wrapper2而非pull-left或pull-right。

如果您需要更灵活的使用方式，可以使用James Ives建议的内容。否则，您应该将其更改为：

在样式表中添加一行，如下所示：

<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 &copy; 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>

因此，您现在需要的是确定padding-left值。希望，它有所帮助。

在div bootstrap

2 个答案: