应用引导程序时如何将两个表单字段放在一行中？答案

【问题标题】：how to put two form fields in one line while applying bootstrap?应用引导程序时如何将两个表单字段放在一行中？
【发布时间】：2020-01-22 18:29:05
【问题描述】：

请问css样式，我需要两个输入框（日期和时间）放在一行，但我发现如果我从引导程序中使用表单控件类，它永远不会位于一行，我试过了有几种方法，但仍然很难像我预期的那样找到它们，我想要做的实际上是将日期和时间框以适当的宽度放在一条线上，同时保持引导样式。

<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!--<link href="test.css" rel="stylesheet" type="text/css" />-->

    <title>Hello, world!</title>
  </head>
<form (ngSubmit)="onSubmit()">

        <div class="form-group col-md-6 col-sm-6">
            <label for="startDate">Start Date</label>
            <div style="display: inline-block">
            <input type="Date" class="form-control" formControlName="startDate" id="startDate">
            <select id="startTime" class="form-control" formControlName="startTime">
                    <option value="">--Please choose a time--</option>
                    <option value="08:00 AM">08:00 AM</option>
                    <option value="08:30 AM">08:30 AM</option>
            </select>
            </div>
        </div>
        <div class="form-group col-md-6 col-sm-6">
            <label for="endDate">End Date</label>
                <input type="Date" class="form-control" formControlName="endDate" id="endDate">
                <select id="endTime" class="form-control" formControlName="endTime">
                    <option value="">--Please choose a time--</option>
                    <option value="08:00 AM">08:00 AM</option>
                    <option value="08:30 AM">08:30 AM</option>
            </select>
        </div>
        <div class="form-group col-md-6 col-sm-6">
            <label for="endDate">End Date1</label>
                <input type="Date" formControlName="endDate" id="endDate">
                <select id="endTime" formControlName="endTime">
                    <option value="">--Please choose a time--</option>
                    <option value="08:00 AM">08:00 AM</option>
                    <option value="08:30 AM">08:30 AM</option>
            </select>
        </div>

        <div class="form-group col-md-6 col-sm-6">
        <div class="row">
            <label for="endDate">End Date1</label>

                <input type="Date" class="form-control"  formControlName="endDate" id="endDate">
                <select id="endTime" class="form-control"  formControlName="endTime">
                    <option value="">--Please choose a time--</option>
                    <option value="08:00 AM">08:00 AM</option>
                    <option value="08:30 AM">08:30 AM</option>
            </select>
            </div>
        </div>
    </form>
 </html>

你能帮我在一行中找到两个表单域吗？

【问题讨论】：

标签： bootstrap-4 form-control

【解决方案1】：

我希望这会有所帮助...

<html>

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!--<link href="test.css" rel="stylesheet" type="text/css" />-->

    <title>Hello, world!</title>
</head>

<body>
    <section>

        <form (ngSubmit)="onSubmit()">

            <div class="form-group col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="startDate">Start Date</label>
                        <input type="Date" class="form-control" formControlName="startDate" id="startDate">
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="startTime">Start Time</label>
                        <select id="startTime" class="form-control" formControlName="startTime">
                            <option value="">--Please choose a time--</option>
                            <option value="08:00 AM">08:00 AM</option>
                            <option value="08:30 AM">08:30 AM</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="endDate">End Date</label>
                        <input type="Date" class="form-control" formControlName="endDate" id="endDate">
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="endDate">End Time</label>
                        <select id="endTime" class="form-control" formControlName="endTime">
                            <option value="">--Please choose a time--</option>
                            <option value="08:00 AM">08:00 AM</option>
                            <option value="08:30 AM">08:30 AM</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="endDate">End Date1</label>
                        <input class="form-control" type="Date" formControlName="endDate" id="endDate">
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="endTime">End Time1</label>
                        <select id="endTime" class="form-control" formControlName="endTime">
                            <option value="">--Please choose a time--</option>
                            <option value="08:00 AM">08:00 AM</option>
                            <option value="08:30 AM">08:30 AM</option>
                        </select>
                    </div>

                </div>
            </div>

            <div class="form-group col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="endDate">End Date1</label>
                        <input type="Date" class="form-control" formControlName="endDate" id="endDate">
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="endTime">End Time2</label>
                        <select id="endTime" class="form-control" formControlName="endTime">
                            <option value="">--Please choose a time--</option>
                            <option value="08:00 AM">08:00 AM</option>
                            <option value="08:30 AM">08:30 AM</option>
                        </select>
                    </div>
                </div>
            </div>

        </form>

    </section>
</body>

</html>

【讨论】：

非常感谢您的回答，但如果我不将标签放在第二列中，对齐会有点损坏。但还是很有帮助的

【解决方案2】：

If you inspect the element of startDate, you will find form-control takes width as 100%, you need to adjust based on your requirement. 



<div style="display: inline-block">
            <input type="Date" class="form-control" formcontrolname="startDate" id="startDate" style="
    float: left;
    width: 50%;
">
            <select id="startTime" class="form-control" formcontrolname="startTime" style="
    width: 50%;
">
                    <option value="">--Please choose a time--</option>
                    <option value="08:00 AM">08:00 AM</option>
                    <option value="08:30 AM">08:30 AM</option>
            </select>
            </div>

【讨论】：