如何在表单上方添加空格?填充不起作用

时间:2017-01-29 06:54:27

标签: html css angularjs twitter-bootstrap

我对return Object.assign({}, state, { [id]: { name: 'abc' } }) angular有点新意,所以请耐心等待。我认为表单只是bootstrap的一部分,以使其更容易。

我的html其余部分似乎无法bootstrap。表单位于表单的底部和顶部,表示作业名称位于面板正上方的边缘。我想把它放得更好看起来更好看。但填充/ margin / css不起作用,所以IDK怎么做。谢谢!

align

4 个答案:

答案 0 :(得分:1)

您需要发布minimal, complete, and verifiable example。添加margin-toppadding-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>

答案 1 :(得分:0)

添加bootstrap面板元素,不要忘记添加容器。你可能忘了正确添加css类,除非它与bootatraps当前边距和填充一起正​​常工作。

.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>

答案 2 :(得分:0)

您可以在表单标记&amp;上使用form类添加以下CSS

form {
    margin-top: 25px;
}

答案 3 :(得分:0)

嗨,下面是最简单的解决方案,您必须在表单上方放置一些高度的简单div元素,现在它们是一个高于表格高度50px的空div

&#13;
&#13;
<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>
&#13;
&#13;
&#13;