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

我想你可以为你的网格使用bootstrap吗？

可能的解决方案可能如下所示：

<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>

您不必在代码中使用表格，因为您也可以使用引导网格来对齐您的跟踪信息。

我“猜到”了网格的12个元素的正确分布，并为图像分配了3个部分，其余部分分配了9个部分。您可能需要调整这些参数并在代码中对其进行测试。

The bootstrap documentation提供了许多信息和示例。您将在本文档中找到问题的所有答案; - ）

如何像使用bootstrap的媒体播放器并排放置元素？

1 个答案: