Попытка расположить мой указатель диапазона дат в одной строке

Question

Когда я выбираю параметр диапазона дат в раскрывающейся кнопке, параметры диапазона дат отображаются друг над другом (см. Изображение ниже). Я хотел бы, чтобы они появились в одном ряду. Один из вариантов, который я пробовал, - играть с шириной, как в пикселях, так и в процентах, и когда я ее добавил, вся карта растягивалась вправо. Кто-нибудь знает, почему это происходит?

Так обычно выглядит, прежде чем выбрать «Диапазон дат» в раскрывающемся меню.

Когда я выбираю «Диапазон дат», это выглядит так. Хотелось бы, чтобы это было на одном ряду, а не друг на друге.

Когда я играю со свойством width в CSS, карта растягивается вправо, чего я не хочу.

<div class="report-card-i report-card-i-height" style="position: fixed; z-index: 10; background-color: #fff; float: unset; top: 80px;  padding-left: 100px; padding-right: 85px;">


            <h1>ABC Corp - Summary</h1>

            <div class="col-lg-3 text-center">
                @{
                    <select onchange="updateDates(this, null, null, null )">
                        <option value="0" selected></option>

                        @for (int i = 1; i < @Model.droplist i++)
                        {
                            var tempValue = i;
                            <option value="@tempValue">@Model.droplist.ElementAt(i)</option>
                        }
                    </select>
                }
            </div>
            <div class="col-lg-8" id="dateRange" style="display: none; width:1px">
                <div class="col-lg-2">
                    <div class="input-group date" id="divFrom">
                        <div class="form-line">
                            <input id="startDate" name="startDate" type="text" class="form-control" style="background-color: inherit; width: 85px" placeholder="dd/mm/yyyy" value="@Model.StartDate">
                        </div>
                        <span class="input-group-addon">
                            <i class="fa fa-orange fa-calendar"></i>
                        </span>
                    </div>
                </div>

                <div class="col-lg-2">
                    <span class="font-13 text-muted div-center">to</span>
                </div>
                <div class="col-lg-2">
                    <div class="input-group date" id="divTo">
                        <div class="form-line">
                            <input id="endDate" name="endDate" type="text" class="form-control" style="background-color: inherit; width: 85px" placeholder="dd/mm/yyyy" value="@Model.EndDate">
                        </div>
                        <span class="input-group-addon">
                            <i class="fa fa-orange fa-calendar"></i>
                        </span>
                    </div>
                </div>
                <div class="col-lg-2">
                    <button id="btnTest" class="btn-orange fa-orange btn-sm" onclick="updateDateRanges()" style="margin-left: 10px">Submit</button>
                </div>
            </div>
            <br />
            <br />
                    <div class="fa-orange m-t-10 m-b-15 m-l-80">
                        <div class="row col-lg-12">
                            <div class="col-sm-2 col-xs-2 text-left">
                                &nbsp;
                            </div>
                            <div class="col-sm-2 col-xs-2 text-left">
                                <h4>Number of Deliveries</h4>
                            </div>
                            <div class="col-sm-2 col-xs-2 text-left">
                                <h4>Deliveries per day</h4>
                            </div>
                            <div class="col-sm-2 col-xs-2 text-left">
                                <h4>Gross Amount Due</h4>
                            </div>
                            <div class="col-sm-1 col-xs-1 text-left">
                                &nbsp;
                            </div>
                            <div class="col-sm-1 col-xs-1 text-left">
                                <h4>Monthly Total</h4>
                            </div>
                            <div class="col-sm-1 col-xs-1 text-left">
                                &nbsp;
                            </div>
                            <div class="col-sm-1 col-xs-1 text-left">
                                <h4>YTD Total</h4>
                            </div>
                        </div>
                    </div>
        </div>

Answer 1

Была структурная проблема. Попробуйте это

<div class="row">
        <div class="col-lg-4 text-center">
            @{
            <select onchange="updateDates(this, null, null, null )">
                <option value="0" selected></option>

                @for (int i = 1; i < @Model.droplist i++) { var tempValue=i; <option value="@tempValue">
                    @Model.droplist.ElementAt(i)</option>
                    }
            </select>
            }
        </div>
        <div class="col-lg-8" id="dateRange">
            <div class="row">
                <div class="col-lg-3">
                    <div class="input-group date" id="divFrom">
                        <div class="form-line">
                            <input id="startDate" name="startDate" type="text" class="form-control"
                                style="background-color: inherit; width: 85px" placeholder="dd/mm/yyyy"
                                value="@Model.StartDate">
                        </div>
                        <span class="input-group-addon">
                            <i class="fa fa-orange fa-calendar"></i>
                        </span>
                    </div>
                </div>
                <div class="col-lg-3">
                    <span class="font-13 text-muted div-center">to</span>
                </div>
                <div class="col-lg-3">
                    <div class="input-group date" id="divTo">
                        <div class="form-line">
                            <input id="endDate" name="endDate" type="text" class="form-control"
                                style="background-color: inherit; width: 85px" placeholder="dd/mm/yyyy"
                                value="@Model.EndDate">
                        </div>
                        <span class="input-group-addon">
                            <i class="fa fa-orange fa-calendar"></i>
                        </span>
                    </div>
                </div>
                <div class="col-lg-3">
                    <button id="btnTest" class="btn-orange fa-orange btn-sm" onclick="updateDateRanges()"
                        style="margin-left: 10px">Submit</button>
                </div>
            </div>
        </div>
    </div>