css - 在我的 ASP.Net 表单中添加的分隔符没有显示在我的表单内部

Question

我正在使用 Bootstrap 构建 ASP.net 表单。我使用以下代码和样式在我的表单中添加分隔符。

<div id="ApprovedVenueGroup" class="hidden">
    <div class="form-group required">
        <label for="locationAndPostalAddress" class="control-label col-xs-4">Address</label> 
        <div class="col-xs-8" id="ApprovedVenueContainer">

        </div>
    </div>
</div>


<div class="hr-sect">Physical Address</div>                                                 


<div class="form-group required">
        <label for="locationAndPostalAddress" class="control-label col-xs-4">Address</label> 
    <div class="col-xs-8" id="PhysicalAddressContainer">

    </div>
</div>

我为分隔符使用了以下样式。

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    font-size: 12px;
    margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
    content: "";
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.35);
    height: 1px;
    font-size: 0px;
    line-height: 0px;
    margin: 0px 16px;
}

不幸的是，我的分隔符显示在我的表单之外。如果我添加如下字符，它将正确显示。这意味着分隔符显示在正确的位置。我该如何解决这个问题。请帮忙。

<div id="ApprovedVenueGroup" class="hidden">
    <div class="form-group required">
        <label for="locationAndPostalAddress" class="control-label col-xs-4">Address</label> 
        <div class="col-xs-8" id="ApprovedVenueContainer">

        </div>
    </div>
</div>

**Char**
<div class="hr-sect">Physical Address</div>                                                 


<div class="form-group required">
        <label for="locationAndPostalAddress" class="control-label col-xs-4">Address</label> 
    <div class="col-xs-8" id="PhysicalAddressContainer">

    </div>
</div>

Answer 1

我犯了一个愚蠢的错误。我使用 Bootstrap 作为表单。我忘记定义代码运行良好的 Bootstrap 样式。

地址