Bootstrap行上缺少填充

时间：2017-10-11 09:06:17

标签： html css twitter-bootstrap twitter-bootstrap-3

有人请告诉我这有什么问题吗？

.container {
  margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
  <div id="panel-head" class="panel-heading">

    Edit Widget

  </div>
  <div class="panel-body">
    <div class="row"><label for="title" class="col-sm-1 control-label">Title</label>
      <div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
      <label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
      <div class="col-sm-5"><select id="widget_type_id" class="form-control">
                <option disabled="disabled" value="">Please select one</option>
                <option value="1">
                    2D column
                </option>
                <option value="2">
                    Multi-series 2D column
                </option>
                <option value="3">
                    Multi-series 3D column and line
                </option>
                <option value="4">
                    Gauge
                </option>
                <option value="5">
                    Datatable
                </option>
                <option value="6">
                    Counter
                </option>
            </select></div>
    </div>

    <div class="row">
      <label for="link" class="col-sm-1 control-label">Link</label>
      <div class="col-sm-5">
        <input type="text" id="link" class="form-control">
      </div>
      <label for="font_size" class="col-sm-1 control-label">Font Size</label>
      <div class="col-sm-2">
        <input type="text" id="font_size" class="form-control">
      </div>
    </div>

    <div class="row">
      <label for="caption" class="col-sm-2 control-label">caption</label>
      <div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
    </div>

    <div class="row">
      <label for="subcaption" class="col-sm-2 control-label">subcaption</label>
      <div class="col-sm-4">
        <input type="text" id="subcaption" class="form-control">
      </div>
    </div>

    <div class="row">
      <label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
      <div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
    </div>
  </div>
</div>

caption，subcaption和yaxisname字段之间没有任何填充。

4 个答案:

答案 0 :(得分：1)

见：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.container {
    margin-top: 10px;
}
.form-group {
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}
<div class="panel panel-primary">
    <div id="panel-head" class="panel-heading">

        Edit Widget

    </div>
    <div class="panel-body">
        <div class="row">
        <div class="form-group">
        <label for="title" class="col-sm-1 control-label">Title</label>
            <div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
            <label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
            <div class="col-sm-5"><select id="widget_type_id" class="form-control">
                <option disabled="disabled" value="">Please select one</option>
                <option value="1">
                    2D column
                </option>
                <option value="2">
                    Multi-series 2D column
                </option>
                <option value="3">
                    Multi-series 3D column and line
                </option>
                <option value="4">
                    Gauge
                </option>
                <option value="5">
                    Datatable
                </option>
                <option value="6">
                    Counter
                </option>
            </select></div>
            </div>
        </div>
        
        <div class="row">
        <div class="form-group">
          <label for="link" class="col-sm-1 control-label">Link</label>
          <div class="col-sm-5">
            <input type="text" id="link" class="form-control">
          </div>
            <label for="font_size" class="col-sm-1 control-label">Font Size</label>
            <div class="col-sm-2">
              <input type="text" id="font_size" class="form-control">
            </div>
            </div>
        </div>
        
        <div class="row">
        <div class="form-group">
          <label for="caption" class="col-sm-2 control-label">caption</label>
          <div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
        </div>
        </div>
        
        <div class="row">
        <div class="form-group">
          <label for="subcaption" class="col-sm-2 control-label">subcaption</label>
            <div class="col-sm-4">
              <input type="text" id="subcaption" class="form-control">
            </div>
        </div>
        </div>
        
        <div class="row">
        <div class="form-group">
          <label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
          <div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
        </div>
        </div>
    </div>
</div>

答案 1 :(得分：1)

提供form-group代替row并添加<form class="form-horizontal editform">。

＆＃13;
＆＃13; 
.container {
  margin-top: 10px;
}
.editform.form-horizontal .control-label {  
  text-align: left;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
  <div id="panel-head" class="panel-heading">

    Edit Widget

  </div>
  <div class="panel-body">
  <form class="form-horizontal editform">
    <div class="form-group"><label for="title" class="col-sm-1 control-label">Title</label>
      <div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
      <label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
      <div class="col-sm-5"><select id="widget_type_id" class="form-control">
                <option disabled="disabled" value="">Please select one</option>
                <option value="1">
                    2D column
                </option>
                <option value="2">
                    Multi-series 2D column
                </option>
                <option value="3">
                    Multi-series 3D column and line
                </option>
                <option value="4">
                    Gauge
                </option>
                <option value="5">
                    Datatable
                </option>
                <option value="6">
                    Counter
                </option>
            </select></div>
    </div>

    <div class="form-group">
      <label for="link" class="col-sm-1 control-label">Link</label>
      <div class="col-sm-5">
        <input type="text" id="link" class="form-control">
      </div>
      <label for="font_size" class="col-sm-1 control-label">Font Size</label>
      <div class="col-sm-2">
        <input type="text" id="font_size" class="form-control">
      </div>
    </div>

    <div class="form-group">
      <label for="caption" class="col-sm-2 control-label">caption</label>
      <div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
    </div>

    <div class="form-group">
      <label for="subcaption" class="col-sm-2 control-label">subcaption</label>
      <div class="col-sm-4">
        <input type="text" id="subcaption" class="form-control">
      </div>
    </div>

    <div class="form-group">
      <label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
      <div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
    </div>
   </form>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

这是Form组件的示例HTML，其默认类由Bootstrap提供。

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

参考。链接 - http://getbootstrap.com/docs/4.0/components/forms/

尝试使用其默认类，如果需要任何自定义，请将自定义类添加到元素并覆盖样式。

答案 3 :(得分：0)

您可以做一件事，首先您可以将表单标记用作父类，然后将margin应用于所有标签，而不是容器类。或者你可以给一个类来标记像.customlabel这样的标签，然后使用这个类并添加属性。例如。

form label{
 float:left;
 with:100%;
 margin-top:10px;
}

.customlabel {
  float:left;
  with:100%;
  margin-top:10px;
}
相关问题
最新问题