使引导卡水平显示

Posted 2023-03-28

【中文标题】使引导卡水平显示

【英文标题】：Making bootstrap Card display horizontal

【发布时间】：2020-11-09 09:07:42

【问题描述】：

我在我的网站上制作了一张引导卡，我想让它水平放置。 我想把它转换成。

请通过检查我的代码提供解决方案！

.blue-bg
    background-image: linear-gradient(#1385de,#045f9b);
    color: white;
    

.brown-bg
    
    background-image: linear-gradient(#f8b949,#f7951f);

.order-btn2
    background-image: linear-gradient(#ffde5e,#fdd215);
    color: black;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<li class="card col-sm-3">
                            <img class="card-img-top" src="https://i.ibb.co/Tcn9qV7/phoneSms.png" >
                            <div class="card-header brown-bg">
                                SMS Order
                            </div>
                            <div class="card-body blue-bg p-0 mt-1">
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.</p>
                                <a href="#" class="btn btn-primary order-btn2">Place Order</a>
                            </div>
                        </li>

谢谢。

【问题讨论】：

您真的认为任何人都会经历痛苦的​​访问您的网站来提取您的代码、修复它并发送给您吗？我相信如果你复制你需要帮助的部分代码并在这里分享会更好。而不是给我们一个任务去你的网站...

【参考方案1】：

基本上，bootstrap 有内置的解决方案，它的Horizontal Card 你可以在水平和垂直方向上制作卡片。

这是一个简单的横向卡片示例。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-4">
      <img src="https://via.placeholder.com/150" class="card-img" >
    </div>
    <div class="col-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

【讨论】：

好的，谢谢。我从您提供的代码中得到了很好的帮助。当我完全解决这个问题时，我会在你的解决方案上打勾！