Блог

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

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

#twitter-bootstrap #bootstrap-4 #angular-ui-bootstrap #horizontallist #bootstrap-cards

#twitter-bootstrap #bootstrap-4 #angular-ui-bootstrap #горизонтальный список #bootstrap-карты

Вопрос:

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

dashboard.comonent.html

  <li class="list-group-item" >
    <div class="row no-gutters">
      <div class="col-sm-4">
        <div class="card-body">

          <p style="font-size: 23px;">  <i class="mdi mdi-battery-unknown menu-icon " ></i>
          </p><span id="jammer"
            style="color:white;"></span>

          <h5 class="card-text text-muted" style="font-size:15px;">Lat</h5>
          <h5 class="card-text text-muted" style="font-size:15px;"> Long 
          </h5>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="card-body">
          <p style="font-size: 23px;"> <i class="mdi mdi-battery-unknown menu-icon " ></i></p><span id="jammer"
          style="color:white;"></span>

        <h5 class="card-text text-muted" style="font-size:15px;">Lat</h5>
</div>
      </div>

      <div class="col-sm-2">
        <div class="card-body">
          <p  style="font-size: 23px;"> <i class="mdi mdi-battery-unknown menu-icon " ></i></p>
        </div>
      </div>

</div>
  </li>


</ul>

Есть ли какой-нибудь другой способ разместить списки горизонтально и динамично?

Кто-нибудь может мне помочь в этом.

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

1. «Письма приходят одно за другим», можете ли вы немного прояснить это, возможно, опубликовать MRE или изображение и т. Д.

2. Я отредактировал и разместил изображение, которое у меня есть. Письма приходят одно за другим.

3. @Vipul Tawde Не могли бы вы, пожалуйста, помочь мне в этом вопросе

4. о, похоже, ваши письма заворачиваются, потому что их контейнеры не имеют достаточной ШИРИНЫ. Есть 2 способа подойти к решению этой проблемы. 1. увеличьте ширину нескольких своих контейнеров, и буквы установятся сами. 2. используйте свойства переноса слов, чтобы предотвратить разрыв слов. для этого я опубликую ответ ниже.

5. также установите свойство border для ваших divs, содержащих текст, это поможет понять, почему текст переносится.

Ответ №1:

Используйте следующие свойства css для элемента или div, содержащего текст.

 word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

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

 white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */

Метки: ,