Bootstrap 如何防止文字变更其他项目的高度

vuv7lop3 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(216)

我有两个div，想在同一个位置显示两个div的内容。因为第一个div中的文本较长，并且对正文内容的位置有影响，所以两个div看起来不一样。我希望第二个div正文内容的位置与第一个div正文内容的位置一样。请参见我所附的SS。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
  </head>
  <body style="padding: 40px">
    <div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
      <div class="w-100 bg-warning text-center p-2">
        <a href="">Somecontent from a map function here dsdsadsadsffffffff</a>
      </div>
      <div class="h-100">
        <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
          <text class="bg-warning"> discussed </text>
          <div  onclick="alert('hey click me')">icons here</div>
        </div>
      </div>
    </div>

    <div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ;  height: 130px;">
        <div class="w-100 bg-warning text-center p-2">
          <a href="">Somecontent from a map</a>
        </div>
        <div class="h-100" onclick="alert('hey')">
          <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2"  >
            <text class="bg-warning"> discussed </text>
            <div  onclick="alert('hey click me')">icons here</div>
          </div>
        </div>
      </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

twitter-bootstrap

来源：https://stackoverflow.com/questions/74199217/how-to-prevent-text-from-changing-the-height-of-other-elements

2条答案

按热度按时间

nbewdwxp1#

删除静态height，然后使用.py-3类来获取.h-100 div上垂直padding的1rem。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
</head>

<body style="padding: 40px">
  <div class="d-flex flex-column border border-primary " style="max-width: 400px; height: 140px;">
    <div class="w-100 bg-warning text-center p-2">
      <a href="">Somecontent from a map function here dsdsadsadsffffffff</a>
    </div>
    <div class="h-100 d-flex justify-content-between align-items-center">
      <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100" onclick="alert('hey')">
        <text class="bg-warning"> discussed </text>
        <div onclick="alert('hey click me')">icons here</div>
      </div>
    </div>
  </div>

  <div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px; height: 140px;">
    <div class="w-100 bg-warning text-center py-3">
      <a href="">Somecontent from a map</a>
    </div>
    <div class="h-100 d-flex justify-content-between align-items-center" onclick="alert('hey')">
      <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100">
        <text class="bg-warning"> discussed </text>
        <div onclick="alert('hey click me')">icons here</div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>

</html>

赞(0）回复(0）举报 2022-12-07

i34xakig2#

如果你不想改变高度，我唯一能看到的就是削减文本或增加宽度或你的元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
 <style>
span {
 width : 100%;
 word-break: break-all;
 overflow: hidden;
 position: relative;
 display: block;
 text-overflow: ellipsis;
 white-space: nowrap;
 
}
</style>
  </head>
  <body style="padding: 40px">
    <div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
      <div class="w-100 bg-warning text-center p-2">
        <a href=""><span>Somecontent from a map function here dsdsadsadsffffffff<span></a>
      </div>
      <div class="h-100">
        <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
          <text class="bg-warning"> discussed </text>
          <div  onclick="alert('hey click me')">icons here</div>
        </div>
      </div>
    </div>

    <div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ;  height: 130px;">
        <div class="w-100 bg-warning text-center p-2">
          <a href="">Somecontent from a map</a>
        </div>
        <div class="h-100" onclick="alert('hey')">
          <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2"  >
            <text class="bg-warning"> discussed </text>
            <div  onclick="alert('hey click me')">icons here</div>
          </div>
        </div>
      </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何防止文字变更其他项目的高度

2条答案

相关问题

热门标签

最新问答