Html 列表按钮响应设计

如何将此按钮内联以响应？ 我试过做，但不起作用

<div class="form-group btn-group"  >
    <ul class="btn-group list-inline social "  style="display: flex;">
      <li class="col-xs-12">
        <button type="submit" class="btn  btn-default" name="btn-login" id="btn-login">
          <span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In
        </button> 
      </li>
      <li class="col-xs-12">
        <a href="<?=$fbLoginUrl ?>" class="btn btn-social btn-facebook" style="float:left;margin-right:5px, color:#3B5998">Sign in with Facebook </a>
      </li>
      <li class="col-xs-12">
        <a href="register.php" class="btn btn-social btn-default" style="float:right;">Sign UP Here </a>
      </li>
    </ul>

  </div>  

登录

您已将

style=“display:flex；”

放置在您的

ul

上。默认情况下，

flex

容器不包装。如果要将其包装，则需要添加

flex-wrap:wrap;

…我同意

或者，如果您只希望它应用于某些屏幕宽度，请将该声明移动到

CSS

文件中，这样您就可以使用

@media

查询

---

无法向其添加响应规则是内联

样式被认为是非常糟糕的做法的主要原因之一（另一个原因是很难维护）。
您最好使用@media查询。根据您的目标屏幕设置@media查询。您的按钮文本也太长，因此最好按块显示列表，以防止屏幕大小重叠

移动视图：

@media all and (max-width: 479px) {
ul.btn-group {
display: block;
}
ul.btn-group li {
display: block;
}
}

我将从您的
ul
标签中删除
style=“display:flex；”“
。没有它，两个按钮将是全宽的（它们具有
col-xs-12
类）

如果模式在更大的屏幕上显示得更大，要将它们放在一行中，您可以在这两个屏幕上添加一个额外的类，如
col-sm-6
或
col-md-6
。
使用
@media
或使用百分比的大小，即
宽度：80%
。