Bootstrap 3 - 面板周围的空间

Question

我已在Panel中的bootstrap中创建了一个表单

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我运行它时，面板从最左边到最右边。如何在左侧和右侧获得一些间距，以便可以轻松地将面板边界与浏览器边界区分开来。

Answer 1

将您的面板包装在容器流体类

中

示例摘录

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用自定义css -

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>