Bootstrap响应式内联按钮[重复]

Posted 2023-03-05

【中文标题】Bootstrap响应式内联按钮[重复]

【英文标题】：Bootstrap Responsive Inline button [duplicate]

【发布时间】：2020-07-22 16:31:31

【问题描述】：

我已经在这一点上停留了一段时间，我阅读了有关按钮的 Bootstrap 文档，但我无法将它们与 xs 设备显示在同一行。

例子：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2 col-md-4 col-xs-2">
      <button class="btn btn-success btn-block" type="submit">Send</button>
    </div>
    <div class="col-lg-2 col-md-4 col-xs-2">
      <button class="btn btn-danger btn-block" type="reset">Reset</button>
    </div>
  </div>
</div>

我想了解如何使用 xs 设备在同一行显示按钮：

|按钮 | |按钮 |

谢谢！

【问题讨论】：

col-xs-* 已在 Bootstrap 4 中被删除，取而代之的是 col-*

【参考方案1】：

通过使用btn-block，您规定每个按钮应占据行的整个宽度。 尽管您尝试根据设备调整列宽，但您指定块的事实将取代它。 尝试在按钮本身上使用d-xs-inline 类，'d' 是显示属性，并在 Bootstrap 文档中阅读此内容。这里解释得很好：-

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

祝你好运，

菲尔

【讨论】：

其实：Create block level buttons—those that span the full width of a parent—by adding .btn-block.。问题是 .col-xs-* 已弃用。

所以 OP 想要阻止 sm 和 xl 但内联 md、lg 和 xs？

我认为这里需要澄清一下，最好不要混合类，即依赖网格或在所有宽度上显示块/内联