我正在尝试使用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,等等。我没有在这里添加)
发布于 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>
https://stackoverflow.com/questions/50750168
复制相似问题