2

Web サイトでブートストラップ カードを作成しましたが、水平にしたいと考えています。 これはデフォルトの縦型カードです に変換したいこの水平ビュー。

私のコードを調べて解決策を提供してください!

.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>

ありがとう。

4

1 に答える 1

3

基本的に、ブートストラップには、水平カードと垂直カードの両方を作成できるソリューションが組み込まれています。

これは横型カードの簡単な例です。

<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>

于 2020-07-20T07:05:16.380 に答える