如何在兩個按鈕之間留出空間？以及如何將它們對齊到中心

我正在使用getbootstrap.com的引導程序。我想在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>

來源

2017-05-19 Arjay Legaspi

可能是你正在尋找這個class="text-center"會做一招，有的CSS的間距

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

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

來源

2017-05-19 21:45:26

要明確之間添加空間，並提交按鈕，您可以添加以下CSS。

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

來源

2017-05-19 21:41:18

在過去form-group類重命名爲form-group1並在CSS把這個。 .form-group {text-align:center;}。另外，如果你想要這兩個按鈕之間的空間，請執行此操作。 .btn-primary btn-lg col-sm-4 {margin:10px;}

這裏是一個例子。 jsFiddle

來源

2017-05-19 21:41:41 Jorden1337

如何在兩個按鈕之間留出空間？以及如何將它們對齊到中心

回答

相關問題