如何使用引導程序將元素並排放置，如媒體播放器？

Question

我已經使用bootstrap網格系統和表格，但無法做到這種模板...將元素並排和頂部底部的東西。請幫我怎麼做？

請給相關教程或文章或任何jsfiddle或任何我是初學者的東西。

這裏是模板圖像：

這裏是我的代碼：

<div id='miniPlayerID'> 
    <div class="row" style="padding:10px 0px 10px 0px;background-color:#2D87BA;margin:0px"> 

      <table width="100%"> 

    <col width="10%"/> 
     <col width="20%"/> 

      <col width="10%"/> 
       <col width="10%"/> 
        <col width="10%"/> 
         <col width="40%"/> 

        <tr><td> 
        <img src="img/Album.png" class="img-responsive" id="clickedMiniPlayer" style="width:90%;margin-left:5%;"/> 
        </td><td> 
        <p class="text-justify" id="miniplayerPlayTitle" >Mirchi Mirch</p> 
        </td> 
         <td> 
        <center>       
         <img src="img/bakward.png" class="img-responsive zoom-img" id="previousClickedMiniPlayer" style="width:50%;margin-left:5%;"/></center> 
        </td> 
         <td> 
        <center><img src="img/play.png" class="img-responsive zoom-img" id="playClickedMiniPlayer" style="width:50%;margin-left:5%;"/></center> 
        </td> 
         <td> 
        <center><img src="img/forward.png" class="img-responsive zoom-img" id="nextClickedMiniPlayer" style="width:50%;margin-left:5%;"/></center> 
        </td><td> 
         <center><input type="range" min="-50" max="0" id="miniPlayerVolumeID"></input></center> 
        </td> 
         </tr> 
    </table> 
</div> </div> 

Answer 1

我想你被允許使用引導程序爲網格？

一個可能的解決辦法是這樣的：

<div class="row"> 
    <div class="col-md-3"> 
    <img src=""> <!-- place your image here --> 
    </div> 
    <div class="col-md-9"> 
    <!-- title --> 
    <div class="row"> 
     <div class="col-md-12 text-center"> 
     Yahin hoo main... 
     </div> 
    </div> 

    <!-- your buttons --> 
    <div class="row"> 
     <div class="col-md-4 text-center"> 
     rewind 
     </div> 
     <div class="col-md-4 text-center"> 
     play 
     </div> 
     <div class="col-md-4 text-center"> 
     forward 
     </div> 
    </div> 

    <!-- bar --> 
    <div class="row"> 
     <div class="col-md-12 text-center"> 
     |----*------------------| 
     </div> 
    </div> 
    </div> 
</div> 

您不必使用表在你的代碼，因爲你也可以用引導網格對齊您的跟蹤信息。

I「猜測」網格的12種元素的正確分佈和分配3份到圖像和9的其餘部分。您可能需要調整這些參數並在代碼中對其進行測試。

The bootstrap documentation提供許多信息和示例。你會發現所有回答您的問題本文檔中;-)