Question

我正在使用getbootstrap.com的bootstrap。我想在SAVE和CLEAR按钮之间留一个空格。我还希望他们将中心对齐在文本框上。我怎样才能做到这一点？

<div class="form-group">
  <label for="trucktype" class="col-sm-2">Truck Type</label>
        <div class="col-sm-4">
        <select id="trucktype" name="trucktype" class="form-control" tabindex="2">
          <option value="volvo">Service Wheels</option>
          <option value="saab">Boom Truck</option>
          <option value="mercedes">Crane Truck</option>
          <option value="audi">Pole Trailer Truck</option>
        </select>
        </div>
      </div>

   <div class="form-group">
      <label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label>
      <div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div>
  </div>

  <div class="form-group">
    <label for="truckdesc" class="col-sm-2">Truck Description:</label>
    <div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div>
    </div>

  <div class="form-group">
    <label for="truckphoto" class="col-sm-2">Truck Photo</label>
    <div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div>
  </div>

  <!-- BUTTONS start -->
  <div class="row">      
  <div class="col-sm-4">
  <div class="form-group">
  <input class="btn-primary btn-lg col-sm-4" type="submit" value="Save">
  <input type="reset" class="btn-default btn-lg col-sm-4" name="clear" value="Clear">
  </div>
  </div>
  </div>
  <!-- BUTTONS end -->
 </form>

Answer 1

对于最后一个form-group类，将其重命名为form-group1，并在CSS中将其重命名为.form-group {text-align:center;}。 .btn-primary btn-lg col-sm-4 {margin:10px;}。此外，如果您想在这两个按钮之间留出空间，请执行此操作。 {{1}}

这是一个例子。 jsFiddle

Answer 2

要在clear和submit按钮之间添加空格，可以在CSS下面添加。

.form-group .btn-primary {
margin-right:10px;
}

Answer 3

可能您正在寻找这个class="text-center"会做一个技巧，而一些CSS用于间距

＆＃13;

.btn-spacing 
{
margin-right: 5px;
margin-bottom: 5px !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="form-group">
  <label for="trucktype" class="col-sm-2">Truck Type</label>
        <div class="col-sm-4">
        <select id="trucktype" name="trucktype" class="form-control" tabindex="2">
          <option value="volvo">Service Wheels</option>
          <option value="saab">Boom Truck</option>
          <option value="mercedes">Crane Truck</option>
          <option value="audi">Pole Trailer Truck</option>
        </select>
        </div>
      </div>

   <div class="form-group">
      <label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label>
      <div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div>
  </div>

  <div class="form-group">
    <label for="truckdesc" class="col-sm-2">Truck Description:</label>
    <div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div>
    </div>

  <div class="form-group">
    <label for="truckphoto" class="col-sm-2">Truck Photo</label>
    <div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div>
  </div>

  <!-- BUTTONS start -->
  <div class="row">      
  <div class="col-sm-4">
  <div class="form-group btn-block text-center">
  <input class="btn-primary btn-lg col-sm-4 btn-spacing " type="submit" value="Save">
  <input type="reset" class="btn-default btn-lg btn-spacing  col-sm-4" name="clear" value="Clear">
  </div>
  </div>
  </div>
  <!-- BUTTONS end -->

＆＃13;

如何在两个按钮之间留出空间？以及如何将它们与中心对齐

3 个答案: