首页 文章

在div bootstrap中对齐段落左右两侧的图像

提问于
浏览
0

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

有什么理由吗?

2 回答

  • 0

    要在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/

  • 4

    <p> 标记位于 pull-left 类之外 . 这就是让它看起来像是div的原因 . 当你使用 pull-left . 所有人都应该在课堂上 . 根据您的密码, <p><small> 属于 wrapper2 而不是 pull-leftpull-right .

    如果您需要更灵活的使用,可以使用James Ives建议的内容 . 否则,您应该将其更改为:

    Add 样式表中的一行如下:

    <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 值 . 希望,它有所帮助 .

相关问题