Question

这是我的代码，它将元素按垂直顺序放在另一个下面。我也尝试过使用网格系统，但是当我在小屏幕上使用时它失败了。

我已经使用了边距和填充来给出间距，并且间距没有响应。怎么做？

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

代码：

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

使设计响应，是一件棘手的事情，而上述只是一个起点。

Answer 2

要确保您在#DockedPlayer中作为直接子项放置的任何元素显示在一行中，请使用以下通配符子选择器（父项后跟大于符号和*）：

#DockedPlayer > * {
    display: inline-block;
}

小提琴：https://jsfiddle.net/kgms5spc/2/

或者，您可以通过以下方式确保当前元素显示在一行上：

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

编辑：为了响应。一旦视口达到一定宽度，只需将元素显示为块：

@media (max-width: 767px) {
  #DockedPlayer > * {
    display: block;
  }
}

更新了小提琴：https://jsfiddle.net/kgms5spc/3/

如何将所有元素水平排列，并且应该使用bootstrap响应？

2 个答案: