在div引導程序中將段落的圖像左右對齊

Question

我正在嘗試將每個圖像與“ wrapper2面板頁腳中心塊” 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類之外。 這就是讓它看起來在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值。 希望能有所幫助。