Hi there! Let's tackle both of your Bootstrap layout questions one by one, tailored for regular Bootstrap usage and MVC projects respectively:

问题1：Bootstrap区块中先放标题再添加分割线 #

实现这个布局很直接，Bootstrap自带的排版和分割线组件就能搞定，还能通过内置工具类快速调整样式。

基础实现代码 #

<div class="container my-4">
  <!-- 标题：加粗+下边距 -->
  <h2 class="fw-bold mb-3">我的区块标题</h2>
  <!-- 自定义样式的分割线：蓝色+加粗+半透明 -->
  <hr class="border border-primary border-2 opacity-75">
  <!-- 区块内容 -->
  <p class="mt-3">这里是区块的具体内容，标题和分割线已经完成布局啦~</p>
</div>

个性化调整技巧 #

• 如果想要短一点的左对齐分割线，添加宽度和对齐类：

  <hr class="w-25 border-primary border-2 opacity-75 text-start">
  

• 调整间距：用mt-*/mb-*类控制元素间的上下距离，比如mb-4给标题加更大的下边距。

问题2：MVC项目中实现「分割线-标题-分割线」的布局 #

在MVC项目里，写法和普通HTML一致，只是代码会放在.cshtml视图文件中（可以是独立视图、部分视图或布局页）。我们可以用Bootstrap的Flex布局来实现标题居中、分割线自动填充两侧空间的效果。

核心实现代码（放在.cshtml文件中） #

<div class="container my-5">
  <!-- Flex容器：垂直居中元素 -->
  <div class="d-flex align-items-center">
    <!-- 左侧分割线：自动填充剩余空间 -->
    <hr class="flex-grow-1 border border-secondary opacity-50">
    <!-- 标题：左右加间距+自定义颜色 -->
    <h3 class="mx-4 text-primary">中间标题</h3>
    <!-- 右侧分割线：和左侧样式一致 -->
    <hr class="flex-grow-1 border border-secondary opacity-50">
  </div>
  <!-- 下方内容区域 -->
  <p class="mt-4">这是MVC视图中的内容部分，标题被两条分割线完美包裹~</p>
</div>

MVC项目优化技巧 #

如果需要在多个视图中复用这个布局，可以把它做成部分视图：

1. 在Views/Shared文件夹下创建_CenteredHeadingWithDividers.cshtml文件，内容如下：

   @model string
   <div class="d-flex align-items-center">
     <hr class="flex-grow-1 border border-secondary opacity-50">
     <h3 class="mx-4 text-primary">@Model</h3>
     <hr class="flex-grow-1 border border-secondary opacity-50">
   </div>
   

2. 在需要的视图中调用：

   <div class="container my-5">
     @Html.Partial("_CenteredHeadingWithDividers", "我的复用标题")
     <p class="mt-4">复用组件的内容区域...</p>
   </div>
   

内容的提问来源于stack exchange，提问作者Sonakshi