主页 / coding / 问题 / 79196038
Accepted
hanzoera
Asked: 2024-11-17 05:01:04 +0800 CST

如何在文本/标题旁边添加响应式垂直线

  • 772

在此处输入图片描述

基本上，我唯一剩下的问题就是标题旁边的行的高度自动调整。我用 div flex 包含了垂直线和标题，但我不确定结构本身是否正确或是否是我情况的理想解决方案。

这是我所做的：

.post-title {
  font-weight: 700;
}

.vertical-line {
  height: /* (Main Issue Here) */;
  width: 10px;
  background-color: #007bff;
  margin-right: 1rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="post-title-container d-flex align-items-center">
  <div class="vertical-line"></div>
  <h1 class="post-title">
    Lorem ipsum dolor sit amet consectetur adipisicing
  </h1>
</div>

html

3 个回答

  1. 向@TemaniAfif致敬，我们现在已经解决了。
    编辑： @TayneLeite解决方案同样有效！

    • 显然，问题的根源align-items-center在于<div class="post-title-container d-flex align-items-center">。

    因此，只需将其删除即可解决问题。此外，定义 的粗细时最好使用填充而不是宽度<div class="vertical-line"></div>，这样当文本变长或变短，或调整大小/放大时，其大小就不会重新调整。

    这是我修改后的代码：

    <div class="post-title-container d-flex align-items-center">
    <div class="vertical-line"></div>
    <h1 class="post-title">
        Lorem ipsum dolor sit amet consectetur adipisicing
    </h1>
</div>

    .vertical-line {
    padding: 3px;
    background-color: #007bff; 
    margin-right: 1rem;
}
    • 1
  2. Best Answer

    解决方案 1

    正如 TemaniAfif 的评论：

    • 删除 BS 类.align-items-center。如果align-items: center应用于弹性容器🞴，则所有弹性项目✢都 将具有其内容的高度。由于为.vertical-line空，其高度将为 0。如果未定义任何内容，align-items则stretch默认情况下弹性项目的高度为 100%。

    • 为 增加内边距.vertical-line。由于.vertical-line是弹性项目，其宽度将根据弹性容器的宽度、所述弹性容器内的任何空间以及其他弹性项目的宽度进行调整（请参阅本文）。弹性项目的内边距不受影响。

    此外，由于.vertical-line没有内容，您可以使用填充作为简写，宽度为一半：padding: 5px它的宽度始终为 10px，最小高度为 10px（但它的​​当前高度将是它的弹性容器的高度）。

    🞴任何提到“弹性容器”的地方都是指.post-title-container哪个有flex-direction: row
    ✢任何提到“弹性项目”的地方都是指.vertical-line和.post-title

    解决方案 2

    作为使用额外标记的替代方法，请尝试以下操作：

    • 删除div.vertical-line。从视觉上看，它实际上只是一个边框。
    • 添加border-left: border-left: 10px solid #007bff;到.post-title-container。这是一个真正的边框，只是一种样式（理应如此）。
    • 将 BS 类添加.ps-3到.post-title-container。.ps-3是padding-left: 1rem相当于margin-right: 1rem上的间距.vertical-line。

    以下示例以极简的 Bootstrap 5.3.3 布局展示了这两种解决方案。从美学上讲，它们是相同的，但从语义上讲，解决方案 2更好。示例中注释了其他详细信息。在Full page模式下查看。

    例子

    .post-title {
  font-weight: 700;
}

/*
  Solution 1
  ==========
  width isn't needed
*/
.vertical-line {
  margin-right: 1rem;
  padding: 5px;
  background-color: #007bff;
}

/*
  Solution 2
  ==========
  Apply style to .post-title-container
  .header class was used for demonstration purposes
*/
.header {
  border-left: 10px solid #007bff;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet">
  <!-- 
    Use an external stylesheet and place the <link> as the last one.
  -->
  <link href="path/to/your/style.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="row g-2 mt-3">
      <div class="col">
        <header class="post-title-container d-flex">
          <div class="vertical-line"></div>
          <h1 class="post-title">
            <b>Solution 1:</b> This Title's Flex Container has an Extra &lt;div&gt; That's 10px Wide with a 1rem Margin on the Right.
          </h1>
        </header>
      </div>
    </div>
    <div class="row g-2 mt-3">
      <div class="col">
        <!-- 
          .ps-3 is padding-left: 1rem 
        -->
        <header class="header post-title-container d-flex ps-3">
          <h1 class="post-title">
            <b>Solution 2:</b> This Title's Flex Container has no Extra &lt;div&gt;. The Flex Container has a 10px Wide Border on the Left and 1 rem of Padding on the Left.
          </h1>
        </header>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

    • 1

  3. 你有尝试过这个方法吗？

    .vertical-line { height: auto; /* Automatically adjusts to the height of its container */ width: 4px; /* Adjust the width as needed */ background-color: #007bff; margin-right: 1rem; align-self: stretch; /* Makes sure the line stretches to match the height of the container */ }

    • 0

相关问题