在同一行上對齊兩個圖像和文本boostrap

我基本上有一個文字在兩個圖像之間，其中一個在右邊，另一個在左邊但是當我嘗試對齊它時，任何一個圖像都會到達下一行，而我希望他們在同一行這裏的代碼在同一行上對齊兩個圖像和文本boostrap

<div style="background-color:#ddb56c;clear: both; " class="container"> 

    <div class="col-lg-3 col-xs-3 col-sm-3 col-md-3"> 

    </div> 

    <div class="col-lg-6 col-xs-6 col-sm-6 col-md-6" > 
     <div class="clearfix"> 
      <img class="img-responsive pull-left" src="images/Homepage_03.png" style="max-width: 100%;"/> 
      <h1>Maroon Decor</h1> 
      <img class="img-responsive pull-right" src="images/Homepage_05.png" style="max-width: 100%;" /> 

     </div> 
    </div> 
</div>

來源

2016-08-03 uneeb meer

http://stackoverflow.com/questions/11900457/align-image-to-left-of-text-on-same-line-twitter-bootstrap – Mistalis

我讀的可能的複製這個帖子其實我是不同的，因爲我有兩個圖像的左側圖像和文字完全對齊，但問題出現在正確的圖像，去第二行 –

你想實際上是什麼？圖片+ H1 +圖像？像這樣在屏幕上？確切地說， –

你必須這樣做，實際上。你必須劃分你的屏幕3 + 6 + 3。把一個圖像中div 3然後在文本和div 6然後另一個圖像中div 3

**如果您使用的所有col-lg-x col-xs-x col-sm-x col-md-3那麼這將是對所有設備相同的設計。

<div class="col-lg-3 col-xs-3 col-sm-3 col-md-3"> 
     <img class="img-responsive pull-left" src="images/Homepage_03.png" style="max-width: 100%;"/> 
    </div> 

    <div class="col-lg-6 col-xs-6 col-sm-6 col-md-6" > 
     <div class="clearfix"> 

      <h1>Maroon Decor</h1> 


     </div> 
    </div> 

    <div class="col-lg-3 col-xs-3 col-sm-3 col-md-3"> 
     <img class="img-responsive pull-right" src="images/Homepage_05.png" style="max-width: 100%;" /> 
    </div> 
</div>

來源

2016-08-03 10:21:44

它完成了這項工作，但移動視圖變得混亂了 –

只是使用col-md-3 –

做了詭計！感謝不幸的人不能投票你的解決方案 –

您可以顯示標頭內聯。

<style> 
h1 { 
    display: inline; 
} 
</style>

來源

2016-08-03 10:19:22 RemanBroder

以及那正是我想要的東西只是一件事情是對齊的，但文本是在頂部看起來很漂亮我試圖給一些填充，但它不會下來可能的方式讓它垂直居中？ –

在同一行上對齊兩個圖像和文本boostrap

回答

相關問題