如何使Bootstrap5列变为所有类似的高度？

发布于 2025-01-28 11:50:38 字数 859 浏览 2 评论 0原文

我正在使用Bootstrap5。但是，我只想在这两列中构成类似的高度。我该怎么做？这是代码：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
    <div style="background-color:LightGray" class="container-1 col-xs-6" >
        Cake
        <img src="https://www.mybakingaddiction.com/wp-content/uploads/2011/10/lr-0953.jpg" alt="Cake"/>
<div style="background-color:Gray" class="container-2 col-xs-6">
        Content
    </div>
    </div>
</div>
</div>

原文

I'm using Bootstrap5. However, I'd just like to make a similar height of these two columns. How can I do that?
Here's the Code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
    <div style="background-color:LightGray" class="container-1 col-xs-6" >
        Cake
        <img src="https://www.mybakingaddiction.com/wp-content/uploads/2011/10/lr-0953.jpg" alt="Cake"/>
<div style="background-color:Gray" class="container-2 col-xs-6">
        Content
    </div>
    </div>
</div>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野侃 2025-02-04 11:50:38

也许这会有所帮助

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <h2>Cake</h2>
    <div class="col-6">
      <img class="img-fluid" src="https://www.mybakingaddiction.com/wp-content/uploads/2011/10/lr-0953.jpg"
        alt="Cake" />
    </div>
    <div class="col-6" style="background-color:Gray">
      Content
    </div>
  </div>
</div>

Maybe this can help

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <h2>Cake</h2>
    <div class="col-6">
      <img class="img-fluid" src="https://www.mybakingaddiction.com/wp-content/uploads/2011/10/lr-0953.jpg"
        alt="Cake" />
    </div>
    <div class="col-6" style="background-color:Gray">
      Content
    </div>
  </div>
</div>

回复收藏 0 原文

时光礼记 2025-02-04 11:50:38

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <h2>Cake</h2>
    <div class="col-6">
      <img class="img-fluid" src="https://www.mybakingaddiction.com/wp-content/uploads/2011/10/lr-0953.jpg" alt="Cake" />
    </div>
    <div class="col-6" style="background-color:Gray">
      Content
    </div>
  </div>
</div>

Col-XS-6在Bootstrap5中不起作用，因此您可以使用col-6而不是col-xs-6和Div关闭，并且不正确使用

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <h2>Cake</h2>
    <div class="col-6">
      <img class="img-fluid" src="https://www.mybakingaddiction.com/wp-content/uploads/2011/10/lr-0953.jpg" alt="Cake" />
    </div>
    <div class="col-6" style="background-color:Gray">
      Content
    </div>
  </div>
</div>

col-xs-6 is not working in bootstrap5 so you can use col-6 instead of col-xs-6 and div closing and are used not properly

回复收藏 0 原文

~没有更多了~