时间戳

首页 > 解决方案 > 让文本不包含在 2 列的引导行内

bootstrap-4 - 让文本不包含在 2 列的引导行内

问题描述

我有一个简单的布局，其中包含一个卡片中包含 2 列的行。我尝试了不同的列号组合，添加了无装订线、不同的水平对齐方法，但我似乎无法让文本仅在 2 行中。我得到的最接近的是这样的代码：

https://www.codeply.com/p/xtbQnKs83k

我希望第二列中的成本和 ABC 文本不换行并使用整个卡片空间。像这样的东西：

Type: H. 12345678                  | Cost: 71.09
Target: aaaaaaaaaaaaaaa            | ABC: 123 ggg

标签： bootstrap-4

解决方案

在卡体中添加宽度

<div class="card">
<div class="card-body" style="width:400px">
  <div class="row">
    <div class="col-9">
      <h5 class="card-title">TITLE
      </h5>
      <h6 class="card-subtitle mb-2 text-muted">Released: Aug2</h6>
    </div>
    <div class="col-3">
      <span class="badge badge-pill badge-success">NEW</span>
    </div>
  </div>
  <div class="row justify-content-around no-gutter">
    <div class="col-6">
      Type: H. 12345678<br> 
      Target: aaaaaaaaaaaaaaa
    </div>
    <div class="col-6" style="inline block">
      <span>Cost: 71.09</span><br> 
      <span>ABC: 123 ggg</span>
    </div>
  </div>

</div>

推荐阅读