如何在表格上方添加空间？填充不起作用答案

【问题标题】：How to add space above a form? Padding isn't working如何在表格上方添加空间？填充不起作用
【发布时间】：2017-01-29 16:45:53
【问题描述】：

我对@987654321@ 和bootstrap 有点陌生，所以请耐心等待。我认为形式只是引导程序的一部分，以使其更容易。

我似乎无法将 align 与我的 html 的其余部分很好地结合起来。表格位于表格的底部和顶部，其中显示作业名称位于其正上方面板的边缘。我想把它隔得更多，看起来更好。但是 padding/margin/css 不起作用所以 IDK 怎么做。谢谢！

<form name="jobForm">
    <div class="form-group">
        <label for="jobName">Job Name</label>
        <input type="text"/>
    </div>
    <div>
        <label>By:</label>
        <input type="email" ng-model="reviewCtrl.review.author" required />
        <!-- $ referencing property on the form, valid comes with angular-->
        <div> reviewForm is {{reviewForm.$valid}}</div>
        <input type="submit" value="Submit" />
    </div>
</form>

【问题讨论】：

尝试用
包裹表单标签

标签： html css angularjs twitter-bootstrap

【解决方案1】：

您需要发布minimal, complete, and verifiable example。添加margin-top 或padding-top 都适用于form 元素。导致此问题的代码中必须有其他内容。表单上方的元素是否使用float 属性？

form {
  margin-top: 25px;
  padding-top: 25px;
  // Both margin-top and padding-top work.
}

<form name="jobForm">
  <div class="form-group">
    <label for="jobName">Job Name</label>
    <input type="text"/>
  </div>
  <div>
    <label>By:</label>
    <input type="email" required/>
    <div>Text</div>
    <input type="submit" value="Submit" />
  </div>
</form>

【讨论】：

不。上面是包裹在
项目中的面板。第二个问题：所以我的控制器拥有一系列作业，每个作业都有名称公司等属性。如何以这种形式/html 创建工作的单个对象，并使用 ng-submit="list.addJob(job)" 之类的东西将其传递回控制器？感谢您的帮助！！

【解决方案2】：

添加引导面板元素，不要忘记添加容器。您可能忘记正确添加 css 类，除非它与引导程序当前边距和填充工作正常。

.form{
  margin:10px;
  
}

  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  
  
  
   <div class="panel panel-default">
  <form class="form-horizontal form" name="jobForm" >
    <div class="form-group">
      <label class="control-label col-sm-2" for="jobName">Job Name:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="email" placeholder="Enter email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" >By:</label>
      <div class="col-sm-10">          
        <input type="text" class="form-control" id="pwd" placeholder="Enter password">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
       <div> reviewForm is {{reviewForm.$valid}}</div>
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
  </div>
</div>

【讨论】：

【解决方案3】：

您可以在表单标签上使用form 类并添加以下 CSS

form {
    margin-top: 25px;
}

【讨论】：

【解决方案4】：

您好，下面是最简单的解决方案，您必须将简单的 div 元素放在表单上方一定高度，现在它们是表单上方 50px 高度的空 div

<div style="height:50px;"></div>
    <form name="jobForm">
    <div class="form-group">
        <label for="jobName">Job Name</label>
        <input type="text"/>
    </div>
    <div>
        <label>By:</label>
        <input type="email" ng-model="reviewCtrl.review.author" required />
        <!-- $ referencing property on the form, valid comes with angular-->
        <div> reviewForm is {{reviewForm.$valid}}</div>
        <input type="submit" value="Submit" />
    </div>
</form>

【讨论】：