在div引導中將段落左右對齊

我試圖將每個圖像與「wrapper2 panel-footer center-block」div中文本的左側和右側對齊。它正確地對齊左側圖像，但右側圖像實際上由於某種原因正在「下」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>

的任何原因？

來源

2015-12-15 Kevin K

要在引導程序中將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/

您可以找到引導電網這裏的更多信息：https://getbootstrap.com/examples/grid/

來源

2015-12-15 02:03:00

<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值。希望，它有幫助。

來源

2015-12-15 02:41:38

在div引導中將段落左右對齊

回答

相關問題