asp.net-mvc - 如何使用引导程序输入行名然后在部分中行

它实际上与 Bootstrap 无关，因为无论您是否正在处理 Bootstrap 项目，您都可以使用常规 CSS 来实现这一点。

这是我的弹性盒方法：

<div class="container">
    <h1 class="decorated">
        Browse By Category
    </h1>
</div>

.decorated {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.decorated:before, 
.decorated:after{
    content: "";
    flex: 0 1 10%;
    border-bottom: 1px solid #000;
    margin-top: auto;
    margin-bottom: auto;
}

.decorated:before {
    margin-right: 1rem;
}

.decorated:after {
    margin-left: 1rem;
}

这里的关键是flex: 0 1 10%;属性 on:before和:after：

0：表示您禁用剩余空白空间的增长。如果您希望线条占据整条线，请将其设置为 1
1：表示您启用了空间不足的收缩。
10%：剩余空间分配前的大小。您也可以将其设置为固定宽度4rem。

演示： https ://jsfiddle.net/davidliang2008/0sme3xq9/43/

如果你想使用 Bootstrap Flexbox 类，你可以取出.decorated样式并将 flexbox 类放在元素上：

<div class="container">
    <h1 class="decorated d-flex flex-row justify-content-center">
        Browse By Category
    </h1>
</div>

演示： https ://jsfiddle.net/davidliang2008/0sme3xq9/46/

asp.net-mvc - 如何使用引导程序输入行名然后在部分中行

问题描述

解决方案

推荐阅读