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

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

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

  1. <div class="row">
  2. <div class="col-md-6">
  3. <div class="form-group">
  4. <label class="control-label col-lg-4"> Project: </label>
  5. <div class="col-lg-8">
  6. @Html.TextBoxFor(model => model.detailsConfig.Project, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Project" })
  7. </div>
  8. </div>
  9. </div>
  10. </div>
  11. <div class="row">
  12. <div class="col-md-6">
  13. <div class="form-group">
  14. <label class="control-label col-lg-4">Quantity:</label>
  15. <div class="col-lg-8">
  16. @Html.TextBoxFor(model => model.detailsConfig.Quantity, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Quantity" })
  17. </div>
  18. </div>
  19. </div>
  20. </div>

字符串

vshtjzan

vshtjzan1#

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

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  2. <div class="form-group">
  3. <div class="row">
  4. <div class="col-md-12">
  5. <div class="col-md-6">
  6. <label class="control-label col-lg-4"> Project: </label>
  7. <div class="col-lg-8">
  8. @Html.TextBoxFor(model => model.detailsConfig.Project, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Project" })
  9. </div>
  10. </div>
  11. </div>
  12. </div>
  13. </div>
  14. <div class="form-group">
  15. <div class="row">
  16. <div class="col-md-12">
  17. <div class="col-md-6">
  18. <label class="control-label col-lg-4">Quantity:</label>
  19. <div class="col-lg-8">
  20. @Html.TextBoxFor(model => model.detailsConfig.Quantity, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Quantity" })
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. </div>

字符串

展开查看全部
cygmwpex

cygmwpex2#

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

  1. .top-buffer{
  2. margin-top: 40px;
  3. }

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

4ngedf3f

4ngedf3f3#

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

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

字符串

xoefb8l8

xoefb8l84#

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

yptwkmov

yptwkmov5#

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

  1. g-2
  2. gx-2
  3. gy-2

字符串
阅读更多关于here

相关问题