如何使用 Bootstrap 强制呈现表单？答案

【问题标题】：How can I force the rendering of a form with Bootstrap?如何使用 Bootstrap 强制呈现表单？
【发布时间】：2019-03-30 20:42:06
【问题描述】：

早安，

除了使用 Bootstrap 4.3.1 框架外，我目前正在使用 HTML5、CSS3 和 JS 构建一个经典的 todoList 应用程序。我的缺点是，当我重绘屏幕以测试响应性并且我即将达到 768px 宽时，“添加项目”按钮被压缩并且单词被放在彼此的顶部。可以强制使这种情况不会发生，并且按钮始终具有带有数字“2”的按钮的单词。

另一方面，根据我在第二张图片中看到的屏幕缩小到 768 像素以下时的配置，文本框和按钮都位于另一个下方。我可以这样做，当这种情况发生时，两者之间会产生一个边距，不会像边缘边距那样粘在一起，这样它们就不会那么粘在页面的边缘。

感谢您的支持。

【问题讨论】：

能否在您的问题中添加一些代码？
@Ksav 很抱歉没有向 de cuestion 添加代码。不要考虑它，但在我下次咨询时更正它。幸运的是我得到了答案。

标签： html css bootstrap-4

【解决方案1】：

对于如何使按钮占据其内容的全部宽度的第一个问题，您可以使用 Bootstrap 4 的 input group 组件。特别是 this 部分。

Here's a CodePen example.

或者，您可以将输入旁边的按钮类别从 col-md-2 更改为 col-md-auto。然后您还必须更改输入的类，只需删除-10。这将导致：

<form id="itemForm" class "row my-3">
  <input type="text" id="itemInput" class="col-md form-control" placeholder="Tarea...">
  <button class="btn btn-green col-md-auto" type="submit">Agregar Item</button>
</form>

通过将padding utility class 添加到<div class="container-fluid"> 可以轻松解决另一个问题。像这样：

<div class="container-fluid px-5">
 ...
</div>

这会在 x 轴（左右）上添加一个填充。取值范围为 0-5。

【讨论】：

感谢您的回复，我设法解决了我的问题。

【解决方案2】：

从表单中删除行类

<form id="itemForm" class="my-3">

【讨论】：