列表按钮响应式设计答案

【问题标题】：list buttons responsive design列表按钮响应式设计
【发布时间】：2017-03-30 08:10:18
【问题描述】：

如何将此按钮内联以响应？试过做但是没用。

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

【问题讨论】：

使用@media 或使用百分比的大小，即width: 80%。

标签： html css twitter-bootstrap responsive-design bootstrap-modal

【解决方案1】：

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

flex-wrap:wrap;

...给它。

或者，如果您只希望它适用于某些屏幕宽度，则将该声明移动到 CSS 文件中，您将能够在其中使用 @media 查询。

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

【讨论】：

【解决方案2】：

你最好使用@media 查询。根据您的目标屏幕设置@media 查询。您的按钮文本也太长，因此最好按块显示列表以防止屏幕大小重叠。

移动视图：

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

【讨论】：

【解决方案3】：

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

要将它们放在一行中，以防模态在较大的屏幕上显示得更大，您可以向两者添加一个额外的类，如 col-sm-6 或 col-md-6。

【讨论】：