引導3 - 圍繞面板

Question

空間我在引導

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > 
 
<form> 
 
    <div class="panel panel-primary"> 
 
    <div class="panel-heading">Search</div> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label1</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label2</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label3</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label4</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <button class="btn btn-primary">Search</button> 
 
     </div> 
 

 

 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

創建的形式在面板內部當我運行它，面板從極左到極右跨越。如何在左側和右側獲得一些間距，以便可以輕鬆地將面板邊界與瀏覽器邊界區分開來。

Answer 1

只是包裝容器，液體類中的面板

例如片斷

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    
 
<form> 
 
<div class="container-fluid"> 
 
    <div class="panel panel-primary"> 
 
    <div class="panel-heading">Search</div> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label1</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label2</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label3</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label4</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <button class="btn btn-primary">Search</button> 
 
     </div> 
 

 

 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</form>

通過自定義css--

.wrapper { 
 
margin-left: 2%; 
 
margin-right: 2%; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    
 
<form> 
 
<div class="wrapper"> 
 
    <div class="panel panel-primary"> 
 
    <div class="panel-heading">Search</div> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label1</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label2</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label3</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label4</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <button class="btn btn-primary">Search</button> 
 
     </div> 
 

 

 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</form>

Answer 2

只需添加一些餘量爲.panel

.panel { margin-left: 10px; margin-right: 10px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > 
 
<form> 
 
    <div class="panel panel-primary"> 
 
    <div class="panel-heading">Search</div> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label1</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label2</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label3</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label4</label> 
 
      <input class="form-control" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <button class="btn btn-primary">Search</button> 
 
     </div> 
 

 

 
     </div> 
 
    </div> 
 
    </div> 
 
</form>