html - 如何将我的所有元素水平排成一行并且应该使用 Bootstrap 响应？

Question

这是我的代码，它将元素按垂直顺序依次排列。我也尝试过使用 Grid 系统，但是当我在小屏幕上使用它时失败了。

而且我使用边距和填充来提供间距，但间距没有响应。怎么做？

请帮我找到正确的代码，将所有元素放在一行中并响应所有屏幕；

代码:

<div class="container-fluid" id="DockedPlayer" style=" background-color:#3F51B5;color:white; height:100px; margin-top:20px;">

            <img class="img-responsive" src="bhr2.png" width="80" height="80" style="margin-top:10px;">
            <text style="padding-left:15px;"> Mirchi Mirchi  </text>
            <img src="bakward.png" width="30" height="30" style="margin-top:15px; margin-left:150px; ">
            <img src="play.png" width="30" height="30" style="margin-top:15px; margin-left:50px; ">
            <img src="forward.png" width="30" height="30" style="margin-top:15px; margin-left:50px; ">

        </div>

与之相关的CSS是:

#DockedPlayer{
           position: fixed;
            bottom: 0;
            width: 100%; 

        }

Answer 1

您可以使用 inline-block 显示属性将它们全部排成一行:

#DockedPlayer img,#DockedPlayer text{
    display: inline-block;
}

要使其响应，您可以使用 CSS media-queries(将这些添加到您的 CSS 文件的末尾):

@media screen and (max-width: 600px){
    #DockedPlayer img,#DockedPlayer text{
         width: 100%;
    }
}
@media screen and (min-width: 601px) and (max-width: 900px){
    #DockedPlayer img,#DockedPlayer text{
         width: 48%;
         margin: 0;
         padding: 0;
    }
}

使设计具有响应性是一件棘手的事情，上面只是一个起点。