Question

我是bootstrap学习的初学者，并希望在bootstrap中对齐这些元素。当我没有添加任何图标时，它运行良好。但是如果我添加任何输入字段的任何图标，那么对齐会像下面给出的图一样被破坏。

这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Leave Form</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 <script  type="text/javascript">    
 </script>

</head>
<body style="background-color:#584F39;">

<div class="container"> 

      <div class="panel-group">

            <div class="panel panel-primary"  style="border-color: #73AD21; ">

                  <div class="panel-heading" style=" background-color:#73AD21;">
                    <h3 class="panel-title" style="text-align: center;">Leave Form</h3> 
                  </div>

                  <div class="panel-body">

                    <div class="col-xs-12">             
                         <form class="form-horizontal" >

                               <div class="form-group">

                                 <label class="control-label col-sm-3"  for="eid">Employee ID:</label>
                                 <div class="col-sm-9">    
                                   <input type="text" class="form-control" id="eid"  placeholder="Enter ID">        
                                 </div>

                               </div>




                                <div class="panel panel-primary "  style="border-color: #73AD21; margin-bottom: 15px;">

                                  <div class="panel-heading" style=" background-color:#73AD21;">
                                      <h3 class="panel-title" style="text-align: center;">Employee Information 
                                      <span class=" glyphicon glyphicon-user" aria-hidden="true"></span>
                                      </h3> 
                                  </div>

                                  <div class="panel-body ">

                                        <div class="col-xs-12"> 



                                               <div class="form-group">

                                                <label class="control-label col-sm-2"  for="name" > Name:</label>
                                                <div class="col-sm-4">    
                                                  <input type="text" class="form-control" id="name"  placeholder="Name">        
                                                </div>

                                               <label class="control-label col-sm-2"  for="designation" >Designation:</label>
                                                <div class="col-sm-4">    
                                                  <input type="text" class="form-control" id="designation" placeholder="Designation">        
                                                </div>

                                              </div>         

                                              <div class="form-group">

                                                <label class="control-label col-sm-2"  for="department" > Department:</label>
                                                <div class="col-sm-4">    
                                                    <input type="text" class="form-control" id="department"  placeholder="Department">        
                                                </div>

                                               <label class="control-label col-sm-2"  for="sd" >Sec/Division:</label>
                                                <div class="col-sm-4">    
                                                    <input type="text" class="form-control" id="sd" placeholder="Section/Division">        
                                                </div>
                                              </div>


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



                            <div class="form-group" >  

                                <div class="form-group" >
                                    <label class="control-label col-sm-3" style=" text-align:right;" >Leave Type:</label>
                                    <div class="col-sm-9 ">                 
                                       <select class="form-control " id="employeetype" onchange="updateText('facultyinstitute')">
                                            <option value="" disabled="" selected="">Select Leave Type</option> 
                                            <option value="10">Sick Leave</option>
                                            <option value="10">Study Leave</option>                     
                                      </select>           
                                    </div>
                                </div>      

                                <div class="form-group">
                                   <label class="control-label col-sm-3" style="text-align:right;" >From Date:</label>
                                   <div class="col-sm-9 input-group date">
                                    <input type="text" class="form-control"  placeholder="DD/MM/YYYY" >
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                                   </div>
                                </div>


                                <div class="form-group">
                                   <label class="control-label col-sm-3" style="text-align:right;" >To Date:</label>
                                   <div class="col-sm-9 input-group date">
                                        <input type="text" class="form-control"  placeholder="DD/MM/YYYY" >
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                                   </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-3" style="text-align:right;" >Leave Place:</label>
                                    <div class="col-sm-9 ">    
                                        <input type="text" class="form-control" id="lp"  placeholder="Place Name">        
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-3" style="text-align:right;" >Contact Email:</label>
                                    <div class="col-sm-9 input-group">
                                      <input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon2">
                                      <span class="input-group-addon" id="basic-addon2">@example.com</span>
                                    </div>  
                                </div>          

                                <div class="form-group">
                                    <label class="control-label col-sm-3" style="text-align:right;" >Phone:</label>
                                    <div class="col-sm-9 input-group">
                                      <input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon2">
                                      <span class="input-group-addon"><i class="glyphicon glyphicon-phone-alt"></i></span>                
                                    </div>  
                                </div>              

                            </div>

                            <div class="form-group">        
                              <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-primary">Save</button>
                                <button type="button" class="btn btn-info">Exit</button> 
                              </div>
                            </div>

                        </form>
                    </div>

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

</div>
</body>
</html>

给我一些关于如何正确对齐，间隙等正确处理此图标的线索。如需了解更多信息，请通知我。

Answer 1

输入组：不要与其他组件混合

不要将表单组或网格列类直接与输入混合使用组。而是将输入组嵌套在表单组或内部与网格相关的元素。

因为您要将输入组与列混合，请参阅Docs和正在运行的代码段。

body {
  background-color: #584F39;
}
.panel.panel-primary {
  border-color: #73AD21;
}
.panel-group .panel .panel-heading {
  background: #73AD21;
}
.form-horizontal .panel.panel-primary {
  border-color: #73AD21;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .form-group-top {
    margin-top: 15px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel-group">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title text-center">Leave Form</h3>
      </div>
      <div class="panel-body">

        <form class="form-horizontal">
          <div class="form-group">
            <label class="control-label col-sm-3" for="eid">Employee ID:</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="eid" placeholder="Enter ID">
            </div>
          </div>

          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title text-center">Employee Information <span class=" glyphicon glyphicon-user" aria-hidden="true"></span> </h3> 
            </div>
            <div class="panel-body ">

              <div class="form-group">
                <label class="control-label col-sm-2" for="name">Name:</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" id="name" placeholder="Name">
                </div>
                <div class="form-group-top">


                  <label class="control-label col-sm-2" for="designation">Designation:</label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" id="designation" placeholder="Designation">
                  </div>
                </div>
              </div>


              <div class="form-group">
                <label class="control-label col-sm-2" for="department">Department:</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" id="department" placeholder="Department">
                </div>
                <div class="form-group-top">
                  <label class="control-label col-sm-2" for="sd">Sec/Division:</label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" id="sd" placeholder="Section/Division">
                  </div>
                </div>
              </div>
            </div>

          </div>

          <div class="form-group">
            <label class="control-label col-sm-3" style=" text-align:right;">Leave Type:</label>
            <div class="col-sm-9 ">
              <select class="form-control " id="employeetype" onchange="updateText('facultyinstitute')">
                <option value="" disabled="" selected="">Select Leave Type</option>
                <option value="10">Sick Leave</option>
                <option value="10">Study Leave</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-sm-3" style="text-align:right;">From Date:</label>
            <div class="col-sm-9">
              <div class="input-group date">
                <input type="text" class="form-control" placeholder="DD/MM/YYYY">
                <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-sm-3" style="text-align:right;">To Date:</label>
            <div class="col-sm-9">
              <div class="input-group date">
                <input type="text" class="form-control" placeholder="DD/MM/YYYY">
                <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-sm-3" style="text-align:right;">Leave Place:</label>
            <div class="col-sm-9 ">
              <input type="text" class="form-control" id="lp" placeholder="Place Name">
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-sm-3" style="text-align:right;">Contact Email:</label>
            <div class="col-sm-9">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon2">
                <span class="input-group-addon" id="basic-addon2">@example.com</span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-sm-3" style="text-align:right;">Phone:</label>
            <div class="col-sm-9">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon2">
                <span class="input-group-addon"><i class="glyphicon glyphicon-phone-alt"></i></span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-primary">Save</button>
              <button type="button" class="btn btn-info">Exit</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 2

所有关于对齐和间距（边距和填充）。例如。在“从日期：”行中，你有“”和“输入组”的css使“padding-left：0”因为它的对齐方式不同。您可以在Mozilla中使用Firebug插件来查看和更改浏览器本身的CSS。

此致 Krish

如何对齐这些引导程序表单元素

2 个答案: