我试着把图标放在div的右侧，比如在div的10%空间上，而把标题放在div的90%空间上，而不管标题的长度如何
<div class="col-md-12">
<nb-card >
<nb-card-body class="d-flex flex-row align-items-center">
<label for="icon" class="label col-sm-3 col-form-label">{{title}}</label>
<nb-icon id="icon" pack='eva' icon='minus-square' name="minus-square"
status="{{status}}"></nb-icon>
</nb-card-body>
</nb-card>
</div>
应该添加哪种类来执行这种固定布局？
如果您使用的是引导程序，那么您可以使用引导程序网格系统，分别使用row和col类。 然后，您可以制作您自己的自定义类，并为它们提供CSS属性，以制作您所希望的间距。
例如，我只是使用margin来确定文本和按钮之间的空间。
HTML:
<div class="content-rounded-border">
<div class="row d-flex justify-content-center">
<div class="col-md-12 d-flex justify-content-center text-left">
<label id="title">Title</label><button type="button" class="btn-success btn-style">-</button>
</div>
</div>
</div>
<!--
You don't need this section below,
it's simply to test the title in different lengths
-->
<br />
<div class="row d-flex justify-content-center">
<div class="col-md-4 d-flex justify-content-center">
<button class="btn-primary" id="toggleBtn">Toggle Title</button>
</div>
</div>
CSS:
.content-rounded-border {
display: block;
width: 25%;
height: 100px;
margin-top: 0.5%;
margin-left: 37%;
padding-top: 2.5%;
border: 1px solid black;
border-radius: 5px;
}
.btn-style {
margin-left: 5%;
font-weight: bold;
}
jQUery（使用切换按钮）:
$('#toggleBtn').on("click", function() {
let titleVal = $('#title').html();
if( titleVal == "Title" ) {
$('#title').html("Super Long Title Omg");
} else if( titleVal == "Super Long Title Omg") {
$('#title').html("Title");
}
});
在这里编写示例代码。
忽略我用的容器，那不重要。 我只是在复制你自己容器的视觉。 重要的是网格和你想要的元素的间距。
代码段:
null
$('#toggleBtn').on("click", function() {
let titleVal = $('#title').html();
if( titleVal == "Title" ) {
$('#title').html("Super Long Title Omg");
} else if( titleVal == "Super Long Title Omg") {
$('#title').html("Title");
}
});body{
overflow: hidden !important;
}
.content-rounded-border {
display: block;
width: 90%;
height: 100px;
margin-top: 5%;
margin-left: 5%;
padding-top: 6%;
border: 1px solid black;
border-radius: 5px;
}
.btn-style {
margin-left: 5%;
font-weight: bold;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-rounded-border">
<div class="row d-flex justify-content-center">
<div class="col-md-12 d-flex justify-content-center text-left">
<label id="title">Title</label><button type="button" class="btn-success btn-style">-</button>
</div>
</div>
</div>
<!--
You don't need this section below,
it's simply to test the title in different lengths
-->
<br />
<div class="row d-flex justify-content-center">
<div class="col-md-4 d-flex justify-content-center">
<button class="btn-primary" id="toggleBtn">Toggle Title</button>
</div>
</div>