你知道如何正确实现这种布局吗？

Question

我希望有一个类似的布局：

但是不起作用，布局显示为https://jsfiddle.net/0knckvfh/1/。你知道问题出在哪里吗？

HTML：

<div class="container">
  <div class="row">
    <h6 class="font-weight-bold">Title</h6>
    <p><strong>Name:</strong>  John</p>
    <p><strong>Email:</strong> emailtest...</p>
    <h6 class="font-weight-bold">User 1</h6>
    <p><strong>Name:</strong>  John</p>
    <p><strong>Surname:</strong> Y</p>
    <p><strong>Email:</strong>emailtest...</p>
  </div>
</div>

Answer 1

您的布局显示不正确，因为您忘记将内容包装在Bootstrap的.col-*-*类之一中。没有该包装器，所有内容都默认为flex-wrap: wrap所定义的row。

如果您只是学习Bootstrap，那么这将是阅读其网格系统文档的适当时机：https://getbootstrap.com/docs/4.1/layout/grid/

正确应用col包装后，您的代码结构主要是您希望的方式。再应用一些Bootstrap实用程序类会导致代码看起来像这样：

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">

      <h6 class="font-weight-bold">Title</h6>
      <p><strong class="mr-1">Name:</strong>John</p>
      <p><strong class="mr-1">Email:</strong>emailtest...</p>

      <h6 class="font-weight-bold border-top pt-3">User 1</h6>
      <p><strong class="mr-1">Name:</strong>John</p>
      <p><strong class="mr-1">Surname:</strong>Y</p>
      <p><strong class="mr-1">Email:</strong>emailtest...</p>
  
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想承认@zgood在您的初始帖子的评论中正确地注意到了这个问题。为什么有这么多人关注这个评论的答案涉及不存在的专栏＆＃39;上课超出了我。

Answer 2

<div class="container">
  <div class="row">
  <div class="column">

    <h6 class="font-weight-bold">Title</h6>
    <p><strong>Name:</strong>  John</p>
    <p><strong>Email:</strong> emailtest...</p>
    <h6 class="font-weight-bold">User 1</h6>
    <p><strong>Name:</strong>  John</p>
    <p><strong>Surname:</strong> Y</p>
    <p><strong>Email:</strong>emailtest...</p>
  </div>
  </div>
</div>

会给你你想要的东西，减去分隔两者的黑条，如你的例子中所示，但是因为你没有在你的代码中包含这个，你只是在格式化之后猜测你知道这一点。

Answer 3

请尝试以下代码：

<div class="container">
  <div>
    <h6 class="font-weight-bold">Title</h6>
    <p><strong>Name:</strong>  John</p>
    <p><strong>Email:</strong> emailtest...</p>
    <hr>
    <h6 class="font-weight-bold">User 1</h6>
    <p><strong>Name:</strong>  John</p>
    <p><strong>Surname:</strong> Y</p>
    <p><strong>Email:</strong>emailtest...</p>
  </div>
</div>

Answer 4

这就是你要找的东西：

<div class="container">
 <div class="column">
  <div class="row">
   <div class="column">
    <h6 class="font-weight-bold">Title</h6>
    <p><strong>Name:</strong>  John</p>
    <p><strong>Email:</strong> emailtest...</p>
   </div>
<br/>

   <div class="column">
    <h6 class="font-weight-bold">User 1</h6>
    <p><strong>Name:</strong>  John</p>
    <p><strong>Surname:</strong> Y</p>
    <p><strong>Email:</strong>emailtest...</p>
   </div>
 </div>
</div>
</div>

希望有帮助：）