當螢屏尺寸中等時，我很難讓 div 居中。當螢屏尺寸變為中等時，我的代碼將顯示：
我期望的是以下內容：
.
其實這里我有一些問題，當我慢慢調整螢屏大小時，右側的2張卡片并沒有立即下降。還有一個問題是右邊距不起作用，所以我無法給出個人資料圖片和用戶名之間的距離。
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5 mt-3">
<div class="card">
<div class="card-body">
<a class="card-link" href="#">
<h5 class="card-title"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit consectetur deserunt illo esse distinctio.</h5>
</a>
<a href='#' class='hashtag'>#lorem</a>
<a href='#' class='hashtag'>#lorem</a>
<a href='#' class='hashtag'>#lorem</a>
<a href='#' class='hashtag'>#lorem</a>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam omnis nihil, aliquam est, voluptates officiis iure soluta alias vel odit, placeat reiciendis ut libero! Quas aliquid natus cumque quae repellendus. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ipsa, excepturi. Doloremque, reprehenderit! Quos in maiores, soluta doloremque molestiae reiciendis libero expedita assumenda fuga quae. Consectetur id molestias itaque facere? Hic!
</p>
<div class="row">
<div class="col-md-6">
<div class="d-flex justify-content-between align-items-center">
<div class="mr-100">
<img class="rounded-circle" width="45" src="https://picsum.photos/50/50" alt="">
</div>
<div class="ml-10">
<div class="h6 ml-10">Miracles Lee Cross
<span class="text-muted">@LeeCross</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 text-end">
<span class="badge rounded-pill bg-primary"><i class="fas fa-caret-up"></i> 18</span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-caret-down"></i>
18</span></span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-comment"></i> 18</span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-share"></i> 18</span>
<div class="mt-10">8 bulan lalu</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet !
</p>
<div class="row">
<div class="col-md-6">
<div class="d-flex justify-content-between align-items-center">
<div class="mr-100">
<img class="rounded-circle" width="45" src="https://picsum.photos/50/50" alt="">
</div>
<div class="ml-5">
<div class="h6 ml-10">Miracles Lee Cross
<span class="text-muted">@LeeCross</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 text-end">
<span class="badge rounded-pill bg-primary"><i class="fas fa-caret-up"></i> 18</span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-caret-down"></i>
18</span></span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-comment"></i> 18</span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-share"></i> 18</span>
<div class="mt-10">8 bulan lalu</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mt-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-3 mt-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>uj5u.com熱心網友回復：
首先將列保留為中等寬度。您將它們減少到 6，這是網格的一半。請記住，Bootstrap 是移動優先的，因此您可以為特定斷點和 up設定屬性。
col-lg-6
然后將文本對齊和flex 對齊設定為居中，以便低于大的斷點。
將此用于 flex：
justify-content-center justify-content-lg-between
這對于文本：
text-center text-lg-end
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5 mt-3">
<div class="card">
<div class="card-body">
<a class="card-link" href="#">
<h5 class="card-title"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit consectetur deserunt illo esse distinctio.</h5>
</a>
<a href='#' class='hashtag'>#lorem</a>
<a href='#' class='hashtag'>#lorem</a>
<a href='#' class='hashtag'>#lorem</a>
<a href='#' class='hashtag'>#lorem</a>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam omnis nihil, aliquam est, voluptates officiis iure soluta alias vel odit, placeat reiciendis ut libero! Quas aliquid natus cumque quae repellendus. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ipsa, excepturi. Doloremque, reprehenderit! Quos in maiores, soluta doloremque molestiae reiciendis libero expedita assumenda fuga quae. Consectetur id molestias itaque facere? Hic!
</p>
<div class="row">
<div class="col-lg-6">
<div class="d-flex justify-content-center justify-content-lg-between align-items-center">
<div class="mr-100">
<img class="rounded-circle" width="45" src="https://picsum.photos/50/50" alt="">
</div>
<div class="ml-10">
<div class="h6 ml-10">Miracles Lee Cross
<span class="text-muted">@LeeCross</span>
</div>
</div>
</div>
</div>
<div class="col-lg-6 text-center text-lg-end">
<span class="badge rounded-pill bg-primary"><i class="fas fa-caret-up"></i> 18</span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-caret-down"></i>
18</span></span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-comment"></i> 18</span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-share"></i> 18</span>
<div class="mt-10">8 bulan lalu</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet !
</p>
<div class="row">
<div class="col-md-6">
<div class="d-flex justify-content-center justify-content-lg-between align-items-center">
<div class="mr-100">
<img class="rounded-circle" width="45" src="https://picsum.photos/50/50" alt="">
</div>
<div class="ml-5">
<div class="h6 ml-10">Miracles Lee Cross
<span class="text-muted">@LeeCross</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 text-center text-lg-end">
<span class="badge rounded-pill bg-primary"><i class="fas fa-caret-up"></i> 18</span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-caret-down"></i>
18</span></span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-comment"></i> 18</span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-share"></i> 18</span>
<div class="mt-10">8 bulan lalu</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mt-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-3 mt-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/380544.html
標籤：推特引导 bootstrap-5