如何将列表项水平放置在 bootstrap 卡片中（列表必须动态放置，即来自后端）

Question

我已经创建了 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>

有没有其他方法可以水平和动态放置列表。

谁能帮我解决这个问题。

Answer 1

对包含文本的元素或 div 使用以下 css 属性。

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

以上代码允许折叠单词但不能折叠字母。如果您不想将任何内容换行或折叠到下一行，请参考上述属性的不同值 here.

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

如何将列表项水平放置在 bootstrap 卡片中（列表必须动态放置，即来自后端）

How to place the list items horizontally in bootstrap cards(lists have to be placed dynamically i.e coming from the backend)

twitter-bootstrap

bootstrap-4

angular-ui-bootstrap

horizontallist

bootstrap-cards