Question

我在创建此card时遇到了麻烦。我想做的是两列，一列col-xs-3，另一列col-xs-9。 col-xs-3中的标题应与col-xs-9中的标题匹配。

以某种方式我无法实现这一目标。

下面是我现在的卡片副本...有人可以帮我吗？

.detail-titles {
  color: blue;
  border-right: 1px solid red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12 col-xl-12 ">



  <div class="card">
    <div class="card-body">
      <div class="container">
        <div class="row">
          <div class="col-xs-3 detail-titles">
            <p>1 title</p>
            <p>2 title</p>
            <p>3 title</p>
            <p>4 text</p>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-9 text-right">
            <p>1 title-match</p>
            <p>2 title-match</p>
            <p>3 title-match</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan, enim vel condimentum tristique, est lacus placerat risus, sed luctus nulla metus vitae eros. Vivamus dictum aliquam mauris eget consequat. Proin nec lorem a nisi tristique
              porta vitae vel quam. Sed est nisi, aliquam eu ligula sit amet, pulvinar finibus est. Curabitur lectus augue, fermentum et mauris eget, hendrerit sollicitudin nisi. Morbi in lacus ac sapien malesuada commodo ut a lectus. Integer at diam
              convallis, molestie sem sit amet, gravida lorem. Fusce sagittis ornare dui. Maecenas at vestibulum lorem, in sodales tellus. Nunc sed urna in nunc gravida fermentum id non diam. Mauris porttitor nisl sed quam commodo, sit amet ultrices dolor
              gravida. Donec imperdiet venenatis dui sit amet condimentum. Morbi vel nisi pellentesque, vulputate nibh a, ornare sem. Pellentesque tempus nisl quis rutrum hendrerit. Praesent eget massa nisl. Vestibulum elit tortor, mollis vitae orci eget,
              vestibulum iaculis sapien. Sed vulputate risus vel lectus congue, sit amet dapibus arcu commodo.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

col-xs在bootstrap4中不可用

删除此父级container(row)的{{1}}

<div class="col-sm-9 text-right">

.detail-titles {
  color: blue;
  border-right: 1px solid red;
}

Answer 2

您有两个“行”元素，但只需要一个。

由于您使用的是boostrap 4，我在引导栏中也将xs更改为sm，请参见以下内容：`col-xs-*` not working in Bootstrap 4

<div class="card">
    <div class="card-body">
        <div class="container">
            <div class="row">
                <div class="col-sm-3 detail-titles">
                    <p>1 title</p>
                    <p>2 title</p>
                    <p>3 title</p>
                    <p>4 text</p>
                </div>
                <div class="col-sm-9 text-right">
                    <p>1 title-match</p>
                    <p>2 title-match</p>
                    <p>3 title-match</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan, enim vel condimentum tristique, est lacus placerat risus, sed luctus nulla metus vitae eros. Vivamus dictum aliquam mauris eget consequat.
                      Proin nec lorem a nisi tristique porta vitae vel quam. Sed est nisi, aliquam eu ligula sit amet, pulvinar finibus est. Curabitur lectus augue, fermentum et mauris eget, hendrerit sollicitudin nisi. Morbi in lacus ac sapien malesuada commodo ut a lectus.
                      Integer at  diam convallis, molestie sem sit amet, gravida lorem. Fusce sagittis ornare dui. Maecenas at vestibulum lorem, in sodales tellus. Nunc sed urna in nunc gravida fermentum id non diam.
                      Mauris porttitor nisl sed quam commodo, sit amet ultrices dolor gravida. Donec imperdiet venenatis dui sit amet condimentum. Morbi vel nisi pellentesque, vulputate nibh a, ornare sem.
                      Pellentesque tempus nisl quis rutrum hendrerit. Praesent eget massa nisl. Vestibulum elit tortor, mollis vitae orci eget, vestibulum iaculis sapien. Sed vulputate risus vel lectus congue, sit amet dapibus arcu commodo.</p>
                </div>
            </div>
        </div>
    </div>
</div>

像div的内部bootstrap4卡一样的表

2 个答案: