引导模式表单中的元素没有排列

Question

我正在学习引导程序并完成一项任务以创建模态表单，但我似乎没有让表单中的元素按预期排列。尝试将整个<form> 包装在<div class="container-fluid"> 中。我期待“单选”按钮和日期输入文本字段会对齐，但他们没有。帮助，有人可以指出我做错了什么吗？

结果：

代码：

<div id="reserveModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Reserve Table</h4>
            </div>
            <div class="modal-body">
                <form action="POST" id="reservetable" name="reservetableform" class="form-inline" role="form">
.                   <!--Number of Guests-->
                    <div class="form-group">
                        <div class="row">
                            <div class="col-xs-4">
                            <label class="control-label text-right">Number Of Guests</label>
                            </div>
                            <div class="col-xs-8">
                                <div class="radio">
                                    <label for="reservation1" class="radio-inline">
                                        <input type="radio" value="1" name="reserveguest" id="guest1">1</label>
                                    <label for="reservation2" class="radio-inline">
                                        <input type="radio" value="2" name="reserveguest" id="guest2">2</label>
                                 </div>
                            </div>
                        </div>
                    </div>

                    <!--Date and time-->
                    <div class="form-group">
                        <div class="row">
                            <div class="col-xs-4">
                            <label class="control-label text-right">Date and Time</label>
                            </div>
                            <div class="col-xs-4">
                                <div class="input-group">
                                    <input type="text" class="form-control" aria-label="date" placeholder="Date">
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="input-group">
                                    <input type="text" class="form-control" aria-label="time" placeholder="Time">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

将form-inline 更改为form-horizontal

同时删除 <div class="row"> 元素，因为使用 form-group 时不需要它们

这是Bootply Example

Answer 2

使用引导程序的表单水平类

Answer 3

您可能希望使用表格以更简单的形式显示该数据。不建议使用表格来布局网站，但对于表单，它是完全可以接受的。

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        
        <!-- beginning form -->
        
        <form class="form-horizontal">
          <table style="width: 100%">
            <tr>
              <td>
                <label for="radio">number of guests</label>
                <input type="radio" name="radio"> 1
                <input type="radio" name="radio"> 2
              </td>
            </tr>

            <tr>
              <td>
                <label for="date and time">Date</label>
                <input type="date" name="date">
              </td>
            </tr>
            <tr>
              <td>
                <label for="time">Time</label>
                <input type="time" name="time">
              </td>
            </tr>
          </table>
        </form>
        
        <!-- end of form -->
        
      </div>
    </div>