如何在Bootstrap 4中使输入/文本占据整个div的宽度？
如何在Bootstrap 4中使输入/文本占据整个div的宽度？
提问于 2018-06-08 05:08:17
我正在尝试使用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>
上面的代码就是我所拥有的。我不确定这是不是正确的方法？
我不知道这是否有用，我在一个视图(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>© @DateTime.Now.Year - My Project</p>
</footer>
</div>这是视图：
<input type="text" class="form-control" placeholder="Email address">这是我渲染视图时的外观(还有其他与背景颜色相关的CSS，等等。我没有在这里添加)
回答 1
Stack Overflow用户
发布于 2018-06-08 05:21:56
列的两侧填充为15px。要删除填充，您可以...
在包含输入的列上对padding:0使用p-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中的所有cols中删除填充。这也将删除行中的负边距，这将影响在较小屏幕上与视口的边对齐。
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50750168
复制相关文章
相似问题
腾讯云开发者
