在小型設備上，我想在左側以單行顯示“卡片”-> 影像，在右側顯示名稱和描述。在較大的設備上，我希望并排放置幾張卡片-> 頂部有圖片，下方有描述的標題。
上面的影像和下面的文本對我來說很好，無論如何我無法將影像交換到左邊和文本到右邊。
到目前為止，這是我的代碼：
<div class='col'>
<div class='card h-100'>
<div class='col-4 col-md-12'>
<img src='...' class='img-fluid rounded-start' alt='...'>
</div>
<div class='col-8 col-md-12'>
<div class='card-body'>
<h5 class='card-title'>Title</h5>
<p class='card-text'>Description</p>
</div>
</div>
</div>
</div>
在小型設備上，我正確設定了 col-4 影像和 col-8 文本，但它們仍然保持在彼此下方，我不明白為什么。
uj5u.com熱心網友回復：
將col您的第一個課程更改div為row. 在此之后，你可以添加你card在某些列，并讓它們并排設定有更大的螢屏上col-md-x，col-lg-x和col-xl-x。
你的內容也是一樣的card。將 a 中的內容div與課程分組，并將內容的row每個部分分組到某些列中。
這是有關Bootstrap 網格系統的更多資訊
這是一個例子：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class='row'>
<div class="col-md-4 col-12">
<div class='card h-100'>
<div class='row'>
<div class='col-md-12 col-4'>
<img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA==&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
</div>
<div class='col-md-12 col-8'>
<div class='card-body'>
<h5 class='card-title'>Title</h5>
<p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class='card h-100'>
<div class='row'>
<div class='col-md-12 col-4'>
<img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA==&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
</div>
<div class='col-md-12 col-8'>
<div class='card-body'>
<h5 class='card-title'>Title</h5>
<p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class='card h-100'>
<div class='row'>
<div class='col-md-12 col-4'>
<img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA==&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
</div>
<div class='col-md-12 col-8'>
<div class='card-body'>
<h5 class='card-title'>Title</h5>
<p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class='card h-100'>
<div class='row'>
<div class='col-md-12 col-4'>
<img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA==&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
</div>
<div class='col-md-12 col-8'>
<div class='card-body'>
<h5 class='card-title'>Title</h5>
<p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/421098.html
標籤：