Question

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

真正令我烦恼的是，代码在代码段中正确运行了

以下是示例代码：

＆＃13;

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

＆＃13;

以上代码正是我所拥有的。我不确定这是正确的方法吗？

我不知道这是否有用，我在视图中使用此代码（MVC项目）。

所以这就是它在视觉工作室中的样子：

布局：

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

这就是观点：

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

这是我渲染视图时的样子（还有其他与背景颜色相关的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中的所有列中删除填充。这也将删除行中的负边距，这将影响在较小屏幕上与视口的边对齐...

<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

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

1 个答案: