如何使用Bootstrap强制渲染表单？

Question

早上好，

我目前正在构建一个带有HTML5，CSS3和JS的经典todoList应用程序，以及使用Bootstrap 4.3.1框架。我的缺点是，当我重绘屏幕以测试响应并且我即将达到768px宽时，“添加项目”按钮被压缩并且单词被放在彼此之上。可以强迫这样做不会发生，按钮总是带有数字为“2”的按钮。

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

感谢您的支持。

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

Answer 2

从表单中删除行类

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