使 bootstrap 卡片水平显示

Question

我在我的网站上制作了一张bootstrap卡片，我想把它做成横向的。我想将其转换为 .

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

.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" alt="Card image">
                            <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>

谢谢。

Answer 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" alt="...">
    </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>

使 bootstrap 卡片水平显示

Making bootstrap Card display horizontal

css

twitter-bootstrap

display

card

horizontal-card