css - 如何使输入/文本占据 Bootstrap 4 中 div 的整个宽度？

Question

我正在尝试使用 bootstrap 4，我有一个包含文本框的简单 div。我希望文本框采用 div 宽度。我想在 Bootstrap 中输入，默认情况下，取全宽？

真正困扰我的是代码在代码段中正确运行？？

示例代码如下:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row">
            <div class="col-md" style="background-color: blue;">
               <!-- this is the left side -->
               <input type="text" class="form-control" placeholder="Email address">
            </div>
            <div class="col-md" style="background-color: red;">
               <!-- this is the right side -->
            </div>
        </div>
</div>

上面的代码正是我所拥有的。我不确定这是执行此操作的正确方法吗？

我不知道这是否有帮助，我在 View (MVC 元素)中使用这段代码。

这就是它在 visual studio 中的样子:

布局:

<div class="container">
    <div class="row">
        <div class="col-md">
            @RenderBody()
        </div>
        <div class="col-md d-none d-md-block">
           <!------>
        </div>
    </div>

    <footer>
        <p>&copy; @DateTime.Now.Year - My Project</p>
    </footer>
</div>

这是 View :

<input type="text" class="form-control" placeholder="Email address">

这是我渲染 View 时的样子(还有其他与背景颜色相关的 CSS，我没有在这里添加)

Answer 1

列的两边都有 15px 的内边距。要删除填充，您可以...

使用 p-0 作为 padding:0 在输入的列上:

<div class="container">
        <div class="row">
            <div class="col-md p-0" style="background-color: blue;">
               <!-- this is the left side -->
               <input type="text" class="form-control" placeholder="Email address">
            </div>
            <div class="col-md" style="background-color: red;">
               <!-- this is the right side -->
            </div>
        </div>
</div>

或者，您可以使用 no-gutters 删除 row 中所有列的填充。这还将删除行中的负边距，这将影响与较小屏幕上视口(viewport)两侧的对齐...

<div class="container">
        <div class="row no-gutters">
            <div class="col-md" style="background-color: blue;">
               <!-- this is the left side -->
               <input type="text" class="form-control" placeholder="Email address">
            </div>
            <div class="col-md" style="background-color: red;">
               <!-- this is the right side -->
            </div>
        </div>
</div>

演示:https://www.codeply.com/go/d4AOm39YD3