Bootstrap 3 - Raum um Panel

Question

Ich habe ein Formular in einem Panel Bootstrap

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

erstellt

Wenn ich es laufen, erstreckt sich über die Platte von ganz links nach ganz rechts. Wie kann ich links und rechts einen Abstand erhalten, so dass die Panelgrenze leicht von der Browsergrenze unterschieden werden kann.

Answer 1

einfach wickeln Sie Ihre Platte in einem Container-Fluid Klasse

Beispiel

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

Mit benutzerdefinierten Snippet 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

Fügen Sie einfach einen gewissen Spielraum zum .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>