时间戳

首页 > 解决方案 > 如何动态显示内联引导卡

angular - 如何动态显示内联引导卡

问题描述

在此先感谢您的帮助。我正在使用 Angular 提取数据并使用 Bootstrap 对其进行样式设置。

目前，这些卡片显示在彼此之上。但是，如何水平内联显示卡片？

这是我的代码：

 <div class="card-deck text-center">
        <div class="card box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ forecast.value.date | date: 'MMMM d, y'}}</h4>
        </div>
    <div class="card-body">
        <ul class="list-unstyled mt-3 mb-4">
            <li><img src="{{ forecast.value.hourly[0].weather_icons }}"></li>
            <li>Average Temprature: {{ forecast.value.avgtemp }}&deg;F</li>
            <li>Precipitation: {{ forecast.value.hourly[0].precip }}"</li>
            <li>Summary: {{ forecast.value.hourly[0].weather_descriptions }}</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
        </div>
    </div>
    </div>
    </div>

这是它的显示方式： 在此处输入图像描述

这就是我要找的东西： 在此处输入图像描述

标签： angularbootstrap-4

解决方案

只需col-*在一行中定义一些类。

https://getbootstrap.com/docs/4.0/layout/grid/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card-deck text-center row">
  <div class="card box-shadow col-sm">
    <div class="card-header">
      <h4 class="my-0 font-weight-normal">{{ forecast.value.date | date: 'MMMM d, y'}}</h4>
    </div>
    <div class="card-body">
      <ul class="list-unstyled mt-3 mb-4">
        <li><img src="{{ forecast.value.hourly[0].weather_icons }}"></li>
        <li>Average Temprature: {{ forecast.value.avgtemp }}&deg;F</li>
        <li>Precipitation: {{ forecast.value.hourly[0].precip }}"</li>
        <li>Summary: {{ forecast.value.hourly[0].weather_descriptions }}</li>
      </ul>
      <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
    </div>
  </div>
  <div class="card box-shadow col-sm">
    <div class="card-header">
      <h4 class="my-0 font-weight-normal">{{ forecast.value.date | date: 'MMMM d, y'}}</h4>
    </div>
    <div class="card-body">
      <ul class="list-unstyled mt-3 mb-4">
        <li><img src="{{ forecast.value.hourly[0].weather_icons }}"></li>
        <li>Average Temprature: {{ forecast.value.avgtemp }}&deg;F</li>
        <li>Precipitation: {{ forecast.value.hourly[0].precip }}"</li>
        <li>Summary: {{ forecast.value.hourly[0].weather_descriptions }}</li>
      </ul>
      <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
    </div>
  </div>
</div>

推荐阅读