Question

我有以下模式应该显示水平形式，但是，它没有正确显示，如图所示。 .form-horizontal应该让每个输入都出现在行中吗？感谢任何帮助！

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Edit
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Edit Contact</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" method="POST" id="editForm" role="form">
                    <div class="form-group animated fadeIn">
                        <label for="nameInput">Your name</label>
                            <input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required>
                    </div>

                    <div class="form-group animated fadeIn">
                        <label for="companyInput">Company</label>
                        <input type="company" name="company" class="form-control" id="companyInput" placeholder="Company" required>
                    </div>

                    <div class="form-group animated fadeIn">
                        <label for="posInput">Position</label>
                        <input type="position" name="position" class="form-control" id="posInput" placeholder="Position/Job Title">
                    </div>

                    <div class="form-group animated fadeIn">
                        <label for="contactInput">Contact Number</label>
                        <input type="number" name="contact" class="form-control" id="contactInput" placeholder="Office/Mobile Number" data-error="Please enter a valid mobile number" required>
                        <i class="form-control-feedback glyphicon glyphicon-ok" data-fv-icon-for="number" style="display: block;"></i>
                    </div>

                    <div class="form-group animated fadeIn">
                        <label for="emailInput">Email</label>
                        <input type="email" name="email" class="form-control" id="emailInput" placeholder="Email Address">
                    </div>

                    <div id="genderChose" class="form-group animated fadeIn">
                    <label for="genderInput">Gender</label>
                    <div class="radio">
                        <label>
                        <input type="radio" name="optionsRadios" id="maleOption" value="Male" checked>
                        Male
                        </label>
                    </div>

                    <div class="radio">
                        <label>
                        <input type="radio" name="optionsRadios" id="femaleOption" value="Female">
                        Female
                        </label>
                    </div>
                    </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="editContact" type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要设置标签和输入的列宽。 http://getbootstrap.com/css/#forms-horizontal

所以对于你的第一个表单组：

<div class="form-group animated fadeIn">
     <label for="nameInput" class="col-sm-2 control-label">Your name</label>
     <div class="col-sm-10">
        <input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required>
     </div>
</div>

标签上需要.col-*-*宽度和.control-label以及宽度为<input>的{{1}}周围的div。

Answer 2

为表单元素尝试这种类型的代码：

<div class="form-group animated fadeIn">
     <label for="nameInput" class='col-sm-5'>Your name</label>
     <div class='col-sm-7'>
       <input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required>
     </div>
</div>

Bootstrap .form水平行未正确显示

2 个答案: