列表按钮响应设计

Question

如何将此按钮内联为响应？ 曾经尝试过，但没有工作。

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

Answer 1

您已将style="display: flex;"放在ul上。默认情况下，flex容器不会换行。如果你想要它换行，你需要添加

flex-wrap:wrap;

......对它。

或者，如果您只想在某些屏幕宽度上应用它，请在CSS文件中移动该声明，您可以在其中使用@media个查询。

无法向其添加响应性规则是内联style被认为是非常糟糕的做法的主要原因之一（另一个是因为它很难维护）。

Answer 2

您最好使用@media查询。根据目标屏幕设置@media查询。您的按钮文本也太长了，所以最好是按块显示列表以防止重叠屏幕尺寸。

移动视图：

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

Answer 3

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

如果在较大的屏幕上显示较大的模态，则可以将它们放在一行中，您可以向其添加额外的类col-sm-6或col-md-6。