引导行上缺少填充

请问有人会告诉我这有什么问题吗？引导行上缺少填充

.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字段之间的任何填充。

来源

2017-10-11 Mick

使用class'form-group for padding – Vishnu

给form-group而不是row并添加<form class="form-horizontal editform">。

.container { 
 
    margin-top: 10px; 
 
} 
 
.editform.form-horizontal .control-label { 
 
    text-align: left; 
 
}

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

来源

2017-10-11 09:23:00

看到这个：

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

来源

2017-10-11 09:16:52 Vishnu

这是通过引导其提供的缺省类表单组件例如HTML。

<form> 
    <div class="form-group"> 
    <label for="exampleFormControlInput1">Email address</label> 
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]"> 
    </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>

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

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

来源

2017-10-11 09:18:31 sajee

你可以做一两件事，首先你可以使用表单标签作为父类，然后申请保证金顶部所有的标签，而不是容器类。或者你可以给一个类标签标签，如.customlabel，而不是使用这个类并添加属性。例如。

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

.customlabel { 
    float:left; 
    with:100%; 
    margin-top:10px; 
}

来源

2017-10-11 12:11:31

引导行上缺少填充

回答

相关问题