Блог

Главная - Вопросы по программированию - Разбивка столбцов по строке таблицы

Разбивка столбцов по строке таблицы

#html #.net #razor #bootstrap-4

#HTML #.net #razor #bootstrap-4

Вопрос:

Я пытаюсь центрировать свои столбцы по всей странице. Вместо этого я укладываю строки друг на друга.

Вот мой код:

         <tr>
            <td colspan="2" style="padding-left: 25px; padding-right: 25px;">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                <div class="col-" style="font-weight:bold;">
                                    Total Open
                                </div>
                            </div>
                            <div class="row">
                                <div class="col" id="TotalOpen">
                                    1
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col" style="font-weight:bold;">
                                    Total Unassigned
                                </div>
                            </div>
                            <div class="row">
                                <div class="col" id="TotalUnassigned">
                                    2
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col" style="font-weight:bold;">
                                    LSA Unassigned
                                </div>
                            </div>
                            <div class="row">
                                <div class="col" id="LSAUnassigned">
                                    3
                                </div>
                                <button id="LSAUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col" style="font-weight:bold;">
                                    LS Unassigned
                                </div>
                            </div>
                            <div class="row">
                                <div class="col" id="LSUnassigned">
                                    4
                                </div>
                                <button id="LSUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col-lg-12" style="font-weight:bold;">
                                    SLO Unassigned
                                </div>
                            </div>
                            <div class="row">
                                <div class="col" id="SLOUnassigned">
                                    5
                                </div>
                                <button id="SLOUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col" style="font-weight:bold;">
                                    ATTY Unassigned
                                </div>
                            </div>
                            <div class="row">
                                <div class="col" id="ATTYUnassigned">
                                    6
                                </div>
                                <button id="ATTYUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>

Который выглядит следующим образом:
столбцы со стеком

Я бы хотел, чтобы это выглядело так:
цель

Я использую .cshtml и Bootstrap, чтобы попытаться выполнить это. Я не очень хорошо разбираюсь в HTML и не понимаю, почему столбцы располагаются вертикально, а не горизонтально. Я прошу прощения за мои ужасные навыки рисования в MS.

Комментарии:

1. CSS grid и flexbox — это современный способ создания общего макета списка. Как правило, ввод style s в HTML не рекомендуется. Вместо этого используйте классы и CSS-файлы, чтобы иметь четкое разделение проблем.

2. Кстати, чтобы ответить на ваш вторичный вопрос: ваши элементы выровнены по вертикали, потому что вы используете div тег, который является блочным элементом , обычно заставляющим охватывать всю доступную ширину и размещать следующий родственный элемент ниже. Дополнительные сведения об этом см. в разделе HTML-блок и встроенные элементы .

Ответ №1:

Если вы используете a bootstrap 4 , используйте строку структуры, подобную этой.
Если вы добавили больше <div> кода, будет получен элемент блока.

Итак, давайте попробуем так

 <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="row">
  <div class="col-md-2 col-sm-2">
    <div style="font-weight:bold;">
      Total Open
    </div>
    <div id="TotalOpen">
      1
    </div>
  </div>
  <div class="col-md-2 col-sm-2">
    <div style="font-weight:bold;">
      Total Unassigned
    </div>
    <div id="TotalUnassigned">
      2
    </div>
  </div>
  <div class="col-md-2 col-sm-2">
    <div style="font-weight:bold;">
      LSA Unassigned
    </div>
    <div id="LSAUnassigned">
      3
    </div>
    <button id="LSAUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
  </div>
</div>