如何为每一行留出空间(CSS问题)



在我的输出下面没有每一行的空间,如何使用Bootstrap CSS为每一行提供空间?请检查代码

 <div class="form-group" >
                       <div class="col-sm-2">
                           <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                       </div>
                   </div>

提前感谢

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

.form-group > * {
           margin:5px;
        }

正确的标记应该是(以col-width为例):

    <div class="row">
        <div class="col-sm-2">
            <div class="form-group">
                <label for="input1">Some label</label>
                <input id="input1" placeholder="Type something…" type="text">
            </div>
            <div class="form-group">
                <label for="input2">Some label 2</label>
                <input id="input2" placeholder="Type something…" type="text">
            </div>
        </div>
    </div>

目前,您还没有定义任何行。

最新更新