css 如何在bootstrap 5卡旁边的右上角找到一个按钮?

3qpi33ja  于 2023-08-09  发布在  Bootstrap
关注(0)|答案(3)|浏览(127)

如何在引导卡旁边的右上角获得一个按钮?
到目前为止我的代码:

<div className="row p-5 m-2">
          {savedEpisodes?.map((saved) => {
            return (
              <div className="col-md-2" key={saved.episode.id}>
                <div style={{ color: "white" }}>X</div>
                <div className="card">
                  <div style={{ color: "white" }}>X</div>
                  <img
                    src={saved.episode.images[1].url}
                    alt="podcastimg"
                    className="card-img-top"
                  />
                  <div className="card-body">
                    <h5 className="card-title" style={{ textAlign: "center" }}>
                      <Link to={`/episode/${saved.episode.id}`}>
                        <span style={{ fontWeight: "bold", color: "white" }}>
                          {saved.episode.name}
                        </span>
                      </Link>
                    </h5>
                  </div>
                </div>
                <div style={{ color: "white" }}>X</div>
              </div>
            );
          })}
        </div>

字符串
我正在测试不同的位置,到目前为止,我只能得到它渲染的顶部和底部。我试图得到右上角的按钮,除了我的引导卡,示例如下所示:
我在那里画了个黑色的X


的数据
先谢了。

k3bvogb1

k3bvogb11#

设置卡位置相对和按钮位置绝对,尝试右,顶部

w6mmgewl

w6mmgewl2#

你可以按照下面的代码
超文本标记语言

<div className="row p-5 m-2">
    {savedEpisodes?.map((saved) => {
      return (
        <div className="col-md-2" key={saved.episode.id}>
          <div className="card">
            <div class="x-icon">X</div>
            <img
              src={saved.episode.images[1].url}
              alt="podcastimg"
              className="card-img-top"
            />
            <div className="card-body">
              <h5 className="card-title" style={{ textAlign: "center" }}>
                <Link to={`/episode/${saved.episode.id}`}>
                  <span style={{ fontWeight: "bold", color: "white" }}>
                    {saved.episode.name}
                  </span>
                </Link>
              </h5>
            </div>
          </div>
        </div>
      );
    })}
  </div>

字符串
CSS格式

.x-icon{
  position: absolute;
  top: 0;
  right: 0;
}


如果你想x图标更多的右上角,那么你可以应用一个负值。
范例

.x-icon{
      position: absolute;
      top: -10px;
      right: -10px;
    }

yebdmbv4

yebdmbv43#

如果你不太习惯使用css(像我一样),在bootstrap中把一个按钮放在元素的右上角并不常见。但我认为徽章与药丸有类似的功能,可以作为一种替代。https://getbootstrap.com/docs/5.0/components/badge/#positioned

相关问题