同一行中的两个输入，与其他输入不同的填充

时间：2018-08-01 17:42:32

标签： twitter-bootstrap twitter-bootstrap-3

我在布局上遇到问题，我在使用引导程序以及名为gentelella的管理面板时使用了引导程序。 我的问题是输入表格的填充不一样，我尝试用div换行，但这不起作用，这是html文件-js小提琴[https://jsfiddle.net/x7e4n8tj/ 1 [ enter image description here] 2                                                                                      

个人信息

                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <br />

                    <form action="/user/personal_information.php" method="post">

                      <div class="row">
                        <div class="form-group">
                            <label>My Referral Link*</label>
                            <input type="text" value="/signup.php?aff=CH10001" class="form-control" placeholder="" name="referrallink" readonly="readonly">
                        </div>
                      </div>
                      <div class="row">
                        <div class="form-group">
                            <label>Username*</label>
                            <input type="text" value="" class="form-control" placeholder="" name="referrallink" readonly="readonly">
                        </div>
                      </div>
                      <div class="row">
                      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="First Name">
                        <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                      </div>
                      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="First Name">
                        <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                      </div>
                      </div>

 <div class="row row-no-padding">
                        <div class="col-sm-6 form-group">

                                    <label>First Name*</label>
                                    <input type="text" value="" class="form-control" placeholder="" name="fname" required="">
                                </div>

                            <div class="col-sm-6 form-group">

                                    <label>Last Name*</label>
                                    <input type="text" value="" class="form-control" placeholder="" name="lname" required="">

                            </div>
                      </div>


                        <div class="form-group">
                        <label>Gender</label>
                                <input type="radio" name="gender" value="male" id="sex"> Male <input type="radio" name="gender" value="female" id="sex"> Female                         </div>
                        <div class="col-sm-6 no-pading" style="padding-right:10px;">
                            <div class="form-group">
                                <label>Email Address</label>
                                <input type="email" value="" class="form-control" placeholder="" name="email" disabled="">
                            </div>
                        </div>
                        <div class="col-sm-6 no-pading">
                            <div class="form-group">
                                <label>Mobile No.</label>
                                <input type="text" value="" class="form-control" placeholder="" name="mobile" required="">
                            </div>
                        </div>
                        <div class="col-sm-6 no-pading" style="padding-right:10px;">                            
                        <div class="form-group">
                            <label>Date of birth*</label>
                            <div class="input-group date">
                                <div class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                    <input type="text" name="dob" value="" class="form-control">
                                    <span class="add-on"><i class="icon-th" style="display: none;"></i></span>
                                </div>
                                <input type="hidden" id="dtp_input2" value="" class="form-control">
                            </div>
                      </div>
                  </div>
                  <div class="col-sm-6 no-pading">
                        <div class="form-group">
                            <label>Highest Qualification*</label>
                            <select id="" class="form-control" name="qualification" required="required">
                                <option value="">Select Qualification</option>
                                <option value="10th">10th</option>
                                <option value="12th">12th</option>
                                <option value="Polytechnic">Polytechnic</option>
                                <option value="CCNA">CCNA</option>
                                <option value="Diploma">Diploma</option>
                                <option value="BA">BA</option>
                                <option value="B.Sc">B.Sc</option>
                                <option value="B.Com">B.Com</option>
                                <option value="BCA">BCA</option>
                                <option value="BBA">BBA</option>
                                <option value="B.Tech">B.Tech</option>
                                <option value="BE">BE</option>
                                <option value="B.Sc(IT)">B.Sc(IT)</option>
                                <option value="MA">MA</option>
                                <option value="M.Sc">M.Sc</option>
                                <option value="M.Com">M.Com</option>
                                <option value="MCA">MCA</option>
                                <option value="MBA">MBA</option>
                                <option value="PGDM">PGDM</option>
                                <option value="M.Tech">M.Tech</option>
                                <option value="ME">ME</option>
                                <option value="M.Sc(IT)">M.Sc(IT)</option>
                                <option value="Ph.D"> Ph.D</option>
                                <option value="LLB">LLB</option>
                                <option value="Mass Communication">Mass Communication</option>
                            </select>
                        </div>
                      </div>
                      <div class="form-group">
                      </div>
                       <div class="form-group">
                            <label style="display: none;">User Name*</label>
                            <input type="text" hidden="hidden">
                        </div>
                        <div class="form-group">
                            <label>Country</label>
                            <input type="text" value="" class="form-control" placeholder="" name="contrydisplay" readonly="readonly">
                        </div>
                        <input type="hidden" value="" name="sno">
                        <div class="form-group text-right">
                            <button type="submit" class="btn  btn-primary">Update</button>
                        </div>
                    </form>

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

1 个答案:

答案 0 :(得分：2)

在行内使用col-sm-12 div 

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="x_panel col-md-12 col-sm-12">
      <div class="x_title">
        <h2>Personal Information</h2>

        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <br />

        <form action="/user/personal_information.php" method="post">

          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <label>My Referral Link*</label>
                <input type="text" value="/signup.php?aff=CH10001" class="form-control" placeholder="" name="referrallink" readonly="readonly">
              </div>
            </div>

          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <label>Username*</label>
                <input type="text" value="" class="form-control" placeholder="" name="referrallink" readonly="readonly">
              </div>
            </div>

          </div>
          <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
              <input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="First Name">
              <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
              <input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="First Name">
              <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
            </div>
          </div>

          <div class="row row-no-padding">
            <div class="col-sm-6 form-group">

              <label>First Name*</label>
              <input type="text" value="" class="form-control" placeholder="" name="fname" required="">
            </div>

            <div class="col-sm-6 form-group">

              <label>Last Name*</label>
              <input type="text" value="" class="form-control" placeholder="" name="lname" required="">

            </div>
          </div>


          <div class="form-group">
            <label>Gender</label>
            <input type="radio" name="gender" value="male" id="sex"> Male <input type="radio" name="gender" value="female" id="sex"> Female
          </div>
          <div class="row">
            <div class="col-sm-6 no-pading" style="padding-right:10px;">
              <div class="form-group">
                <label>Email Address</label>
                <input type="email" value="" class="form-control" placeholder="" name="email" disabled="">
              </div>
            </div>
            <div class="col-sm-6 no-pading">
              <div class="form-group">
                <label>Mobile No.</label>
                <input type="text" value="" class="form-control" placeholder="" name="mobile" required="">
              </div>
            </div>
            <div class="col-sm-6 no-pading" style="padding-right:10px;">
              <div class="form-group">
                <label>Date of birth*</label>
                <div class="input-group date">
                  <div class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input type="text" name="dob" value="" class="form-control">
                    <span class="add-on"><i class="icon-th" style="display: none;"></i></span>
                  </div>
                  <input type="hidden" id="dtp_input2" value="" class="form-control">
                </div>
              </div>
            </div>
            <div class="col-sm-6 no-pading">
              <div class="form-group">
                <label>Highest Qualification*</label>
                <select id="" class="form-control" name="qualification" required="required">
                  <option value="">Select Qualification</option>
                  <option value="10th">10th</option>
                  <option value="12th">12th</option>
                  <option value="Polytechnic">Polytechnic</option>
                  <option value="CCNA">CCNA</option>
                  <option value="Diploma">Diploma</option>
                  <option value="BA">BA</option>
                  <option value="B.Sc">B.Sc</option>
                  <option value="B.Com">B.Com</option>
                  <option value="BCA">BCA</option>
                  <option value="BBA">BBA</option>
                  <option value="B.Tech">B.Tech</option>
                  <option value="BE">BE</option>
                  <option value="B.Sc(IT)">B.Sc(IT)</option>
                  <option value="MA">MA</option>
                  <option value="M.Sc">M.Sc</option>
                  <option value="M.Com">M.Com</option>
                  <option value="MCA">MCA</option>
                  <option value="MBA">MBA</option>
                  <option value="PGDM">PGDM</option>
                  <option value="M.Tech">M.Tech</option>
                  <option value="ME">ME</option>
                  <option value="M.Sc(IT)">M.Sc(IT)</option>
                  <option value="Ph.D"> Ph.D</option>
                  <option value="LLB">LLB</option>
                  <option value="Mass Communication">Mass Communication</option>
                </select>
              </div>
            </div>
          </div>

          <div class="form-group">
          </div>
          <div class="form-group">
            <label style="display: none;">User Name*</label>
            <input type="text" hidden="hidden">
          </div>
          <div class="form-group">
            <label>Country</label>
            <input type="text" value="" class="form-control" placeholder="" name="contrydisplay" readonly="readonly">
          </div>
          <input type="hidden" value="" name="sno">
          <div class="form-group text-right">
            <button type="submit" class="btn  btn-primary">Update</button>
          </div>
        </form>

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

查看更新后的fiddle

相关问题
最新问题