Выровненные по центру bootstrap категории колодцев / плиток из каталога - PullRequest
Новая
       65

Выровненные по центру bootstrap категории колодцев / плиток из каталога

0 голосов
/ 15 апреля 2020

Я пытаюсь разработать вид категории по умолчанию, в котором лунки категорий, которые поступают из каталога, выровнены по центру в главном контейнере, а не flu sh -left. Код по умолчанию, который помещает их в грипп sh слева: 

<div class="panel-category-list">
  <nav class="nav 451_lbl_subcatlist">
        <ul>
            <li class="col-lg-2 col-md-6 col-sm-6 col-xs-12" ng-repeat="c in currentCategory.SubCategories">
                <div class="well">
                    <a ng-href="catalog/{{c.InteropID}}">

                        <div style="padding: 10px 20px;">
                            <figure ng-show="c.Image.URL">
                               <img class="img-responsive" ng-src="{{c.Image.URL}}"/>
                            </figure>
                        </div>

                        <div>
                            <h5 ng-bind-html="c.Name" />
                        </div>
                    </a>
                </div>
            </li>
        </ul>
    </nav></div>

Пример вывода кода выше

Я пытался использовать вложенный div с "display" «определения стиля для выравнивания по центру: 

<div style="display: table; margin: 0 auto;">
<ul style="min-width: 250px; list-style: none;">
    <li ng-repeat="c in currentCategory.SubCategories" style="display: inline;">
        <div class="well">
            <a ng-href="catalog/{{c.InteropID}}">
                <div>
                    <h5 ng-bind-html="c.Name"  />
                </div>

                <div style="padding: 20px;">
                    <figure ng-show="c.Image.URL">
                        <img class="img-responsive" ng-src="{{c.Image.URL}}"/>
                    </figure>
                </div>
            </a>
        </div>
    </li>
</ul></div>

Это отлично работает на настольном компьютере, но когда вы go на мобильное представление, они оставляют грипп sh, вероятно, потому что лунки категорий просто« оборачивают » на новую строку, вместо того, чтобы, скажем, центрировать их с помощью определения bootstrap.

Пример вывода мобильного представления вышеуказанного кода для другого клиента

Поскольку наш у клиентов может быть любое количество категорий, использование bootstrap макета сетки может оказаться невозможным (например, для пользователей с 5 или 7 категориями). Для последовательности и стиля мы собираемся сообщить клиентам, что они должны иметь как минимум 3 категории.

Спасибо! Kyle

...