css 如何使用Bootstrap显示卡底部角的红框中的内容？

dly7yett 于 2023-03-25 发布在 Bootstrap

关注(0)|答案(1)|浏览(119)

picture of layout
我已经试着把这一行移到容器的底部好几个小时了，有人能给我指出正确的方向吗？
下面是代码：

<div class="container min-vh-100 d-flex align-items-center vstack">

        <div class="myCard gradient-day shadow px-3 pt-5 m-5 rounded">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h1 class="" id="day-of-week">Tuesday</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <h4 class="" id="todays-date">Jan 2nd 2023</h4>
                    </div>
                </div>
                <div class="row d-flex align-items-center g-3">
                    <div class="col-1">
                        <h5><i class="fa-solid fa-location-dot"></i></h5>
                    </div>
                    <div class="col">
                        <h3 class="" id="city-name">City Name</h3>
                    </div>
                </div>
                <div class="row row-cols-1">
                    <div class="col">
                        <h1 class="" id="temperature">51 °F</h1>
                    </div>
                    <div class="col">
                        <h4 class="" id="weather">Sunny</h4>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <form action="" id="searchForm">
                <div class="mx-5">
                    <input type="text" class="form-control" placeholder="search for city" name="query" autofocus>
                </div>
            </form>
        </div>

    </div>

我尝试在行上使用justify-self-end和align-self-end，但没有成功。我认为这个问题与.vstack类有关。我发现我可以使用.d-flex、.align-items-center和. vstack的组合将容器移动到视口的中心。如果有更好的方法，我还没有找到。

css

来源：https://stackoverflow.com/questions/75808161/how-can-i-display-the-content-in-the-red-box-at-the-bottom-corner-of-the-card-us

1条答案

按热度按时间

db2dz4w81#

可以通过将display:flex和flex-direction: column应用于.myCard的容器，并将margin-top: auto应用于最后一行来实现。为了增加最后一行样式的特异性，我使用.myCard类选择了该行。

.myCard .container {
  min-height: 400px;
  padding-inline: 2em;
  padding-block: 1em;
  width: max-content;
  display: flex;
  flex-direction: column;
}

.myCard .myCard__last-row {
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container min-vh-100 d-flex align-items-center vstack">
  <div class="myCard gradient-day shadow px-3 pt-5 m-5 rounded">
    <div class="container">
      <div class="row">
        <div class="col">
          <h1 class="" id="day-of-week">Tuesday</h1>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <h4 class="" id="todays-date">Jan 2nd 2023</h4>
        </div>
      </div>
      <div class="row d-flex align-items-center g-3">
        <div class="col-1">
          <h5><i class="fa-solid fa-location-dot"></i></h5>
        </div>
        <div class="col">
          <h3 class="" id="city-name">City Name</h3>
        </div>
      </div>
      <div class="row row-cols-1 myCard__last-row">
        <div class="col">
          <h1 class="" id="temperature">51 °F</h1>
        </div>
        <div class="col">
          <h4 class="" id="weather">Sunny</h4>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <form action="" id="searchForm">
      <div class="mx-5">
        <input type="text" class="form-control" placeholder="search for city" name="query" autofocus>
      </div>
    </form>
  </div>

</div>

赞(0）回复(0）举报 2023-03-25

我来回答

css 如何使用Bootstrap显示卡底部角的红框中的内容？

1条答案

相关问题

热门标签

最新问答