как показать метку и htmltextbox для html-помощника управления mvc и кнопки в одной строке

Question

Я хочу показывать дату и дату с помощью календаря и кнопки отправки в одной строке, но метка и текстовое поле попадают в другую строку.

Ожидаемая операция-

С даты: ______________ На дату: _____________ Buuton

Начало работы

код

        <div class="form-group">
            <div class="row">
                <div class="col-sm-4">
                    <h5>From date: @Html.TextBoxFor(model => model.From_Date, new { @class = "form-control input-sm", id = "datepicker_from_date", style = "width:100px;" })</h5>
                </div>
                <div class="col-sm-4">
                    <h5>To date: @Html.TextBoxFor(model => model.To_Date, new { @class = "form-control input-sm", id = "datepicker_to_date", style = "width:100px;" })</h5>

                </div>
                <div class="col-sm-4">
                    <input type="submit" class="btn btn-success" value="Create" onclick="location.href='@Url.Action("Index", "Calender")'" />
                </div>

            </div>
        </div>

Answer 1

Вы можете использовать inline-формы из документации bootstrap 4

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-group">
            <div class="form-inline">
                 <h5 class="mr-sm-2">From date: </h5>
               
                   
                    <input class = " mr-sm-2 form-control input-sm" id = "datepicker_from_date" style = "width:100px;" /></h5>
               
                <h5 class="mr-sm-2" >To date:</h5>
                     <input class = "form-control mr-sm-2 input-sm" id = "datepicker_to_date" style = "width:100px;" />

      
                    <input type="submit" class="btn btn-success align-text-bottom" value="Create" onclick="location.href='@Url.Action("Index", "Calender")'"  />

            </div>
        </div>