Bootstrap方法在字段之间添加垂直空间

c9qzyr3d  于 2023-08-01  发布在  Bootstrap
关注(0)|答案(5)|浏览(116)

如何在div之间添加垂直空间。这里有没有可以添加的bootstrap类?有什么帮助吗?
下面是我的代码片段:

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label col-lg-4"> Project: </label>
            <div class="col-lg-8">
                @Html.TextBoxFor(model => model.detailsConfig.Project, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Project" })
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label col-lg-4">Quantity:</label>
            <div class="col-lg-8">
                @Html.TextBoxFor(model => model.detailsConfig.Quantity, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Quantity" })
            </div>
        </div>
    </div>
</div>

字符串

vshtjzan

vshtjzan1#

您需要像这样使用<div class="form-group">作为父代

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-group">
<div class="row">
<div class="col-md-12">
            <div class="col-md-6">
              
                    <label class="control-label col-lg-4"> Project: </label>
                    <div class="col-lg-8">
                        @Html.TextBoxFor(model => model.detailsConfig.Project, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Project" })
                    </div>
                    </div>
            </div>
            </div>

        </div>

  <div class="form-group">
     <div class="row">
     <div class="col-md-12">
            <div class="col-md-6">
              
                    <label class="control-label col-lg-4">Quantity:</label>
                    <div class="col-lg-8">
                        @Html.TextBoxFor(model => model.detailsConfig.Quantity, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Quantity" })
                    </div>
                </div>
            </div>
</div>
           </div>

字符串

cygmwpex

cygmwpex2#

bootstrap工具箱中没有可执行此操作的类。
因此,最好的方法是在您的行中添加一个top-buffer类。

.top-buffer{
  margin-top: 40px;
}

字符串
此处的代码依赖:https://codepen.io/boydow/pen/ayZeGW

4ngedf3f

4ngedf3f3#

您可以添加类“mt-#”或到div中以添加顶部边距,其中#是1-5之间的数字,长度不同。如果你想在顶部和底部添加边距,你可以使用“my-#”。这个类是Bootstrap文档的一部分。

<div class="your-class mt-3">Your column</div>

字符串

xoefb8l8

xoefb8l84#

你可以使用这个:第一个月

yptwkmov

yptwkmov5#

我刚发现排水沟的事。它可以按以下方式水平和垂直使用:

g-2
gx-2
gy-2

字符串
阅读更多关于here

相关问题