Bootstrap 4: столбцы равной ширины с использованием сетки - PullRequest
Новая
       33

Bootstrap 4: столбцы равной ширины с использованием сетки

0 голосов
/ 03 мая 2018

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

Насколько я понимаю с начальной загрузкой 4, класс col должен автоматически изменять размер для каждого столбца, поэтому я думаю, что все 8 столбцов будут одинаковой ширины независимо от содержимого.

Верх выглядит хорошо, но строки внизу сжаты. Вот пример:

enter image description here

Вот моя страница бритвы ниже: 

<body>
<div class="container">
    <div class="row">
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].Item)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].ItemDescription)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].CorpCustomer)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].UoM)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedOrder)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedForecast)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].Difference)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].Week)
        </div>
    </div>
</div>

<div class="container">
    <div id="accordion">
        @{int counter = 0; }
        @foreach (var dataVM in Model.CollapseReport)
        {
            <div class="card">
                <div class="card-header" id="heading@(counter)">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse@(counter)" aria-expanded="true" aria-controls="collapse@(counter)">

                            <div class="row">
                                <div class="col">
                                    @dataVM.Summary.Item
                                </div>
                                <div class="col">
                                    @dataVM.Summary.ItemDescription
                                </div>
                                <div class="col">
                                    @dataVM.Summary.CorpCustomer
                                </div>
                                <div class="col">
                                    @dataVM.Summary.UoM
                                </div>
                                <div class="col">
                                    @dataVM.Summary.SummedOrder
                                </div>
                                <div class="col">
                                    @dataVM.Summary.SummedForecast
                                </div>
                                <div class="col">
                                    @dataVM.Summary.Difference
                                </div>
                                <div class="col">
                                    @dataVM.Summary.Week
                                </div>
                                </div>
                        </button>
                    </h5>
                </div>

                <div id="collapse@(counter)" class="collapse" aria-labelledby="heading@(counter)" data-parent="#accordion">
                    <div class="card-body">
                        <form method="post">
                            <input type="hidden" name="var1" value="@dataVM.Summary.CorpCustomer" />
                            <input type="hidden" name="var2" value="@dataVM.Summary.Item" />
                            <input type="submit" class="btn btn-default" value="Add to Log" asp-page-handler="AddLog" asp-route-data="@dataVM.Summary.CorpCustomer, @dataVM.Summary.Item)" />
                        </form>
                        <div class="container">
                                    @foreach (var item in dataVM.WeeksOfData)
                                {
                                        <div class="row">
                                            <div class="col">
                                                @item.Item
                                            </div>
                                            <div class="col">
                                                @item.ItemDescription
                                            </div>
                                            <div class="col">
                                                @item.CorpCustomer
                                            </div>
                                            <div class="col">
                                                @item.UoM
                                            </div>
                                            <div class="col">
                                                @item.SummedOrder
                                            </div>
                                            <div class="col">
                                                @item.SummedForecast
                                            </div>
                                            <div class="col">
                                                @item.Difference
                                            </div>
                                            <div class="col">
                                                @item.Week
                                            </div>
                                        </div>
                            }
                                </div>
                    </div>
                </div>
            </div>
            counter++;
        }
    </div>
</div>

1 Ответ

0 голосов
/ 03 мая 2018

Причина в том, что ваша btn btn-link кнопка вложена в <h5>. Класс .btn от Bootstrap имеет стиль display: inline-block;, который не занимает 100% ширины.

Даже если вы установите width: 100%; на кнопке, ваши столбцы все равно не будут выровнены, потому что:

  1. .btn имеет стиль white-space: nowrap;, поэтому тексты внутри вашего сворачиваемого заголовка не будут переноситься, в то время как тексты внутри сворачиваемого тела будут.
  2. .btn класс имеет отступ .75rem влево и вправо, что займет общую ширину строки.
  3. У вас есть вложенный контейнер внутри вашего разборного тела. Контейнер имеет отступ в 15px влево и вправо, что также займет общую ширину строки.

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

Например, избавиться от кнопки, вложенной в заголовок, и использовать привязку вместо: 

<div class="container">
    @for (int i = 0; i < 5; i++)
    {
        <div class="card">
            <div class="card-header">
                <a href="#" data-toggle="collapse" data-target="#collapse@(i)">
                    <div class="row">
                        <div class="col">Item</div>
                        <div class="col">Item Description</div>
                        <div class="col">Corp Customer</div>
                        <div class="col">UoM</div>
                        <div class="col">Summed Order</div>
                        <div class="col">Summed Forecase</div>
                        <div class="col">Difference</div>
                        <div class="col">Week</div>
                    </div>
                </a>
            </div>
            <div id="collapse@(i)" class="collapse">
                <div class="card-body">
                    <div class="row">
                        <div class="col">Item</div>
                        <div class="col">Item Description</div>
                        <div class="col">Corp Customer</div>
                        <div class="col">UoM</div>
                        <div class="col">Summed Order</div>
                        <div class="col">Summed Forecase</div>
                        <div class="col">Difference</div>
                        <div class="col">Week</div>
                    </div>
                    <div class="row">
                        <div class="col">Item</div>
                        <div class="col">Item Description</div>
                        <div class="col">Corp Customer</div>
                        <div class="col">UoM</div>
                        <div class="col">Summed Order</div>
                        <div class="col">Summed Forecase</div>
                        <div class="col">Difference</div>
                        <div class="col">Week</div>
                    </div>
                    <div class="row">
                        <div class="col">Item</div>
                        <div class="col">Item Description</div>
                        <div class="col">Corp Customer</div>
                        <div class="col">UoM</div>
                        <div class="col">Summed Order</div>
                        <div class="col">Summed Forecase</div>
                        <div class="col">Difference</div>
                        <div class="col">Week</div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

Скриншот:

enter image description here

...