创建这个 html 块的正确方法是什么

Question

我很好奇正确创建网站组件的最佳方法是什么，我说的是严格的 HTML 和 CSS。我正在使用带有 jquery 3.1.1 的 Bootstrap 3。

我正在尝试创建一种能够正确展示我的项目的 3x3 模式。所以我正在尝试创建一个组件，我可以再复制粘贴 8 次。

到目前为止，我已经为 HTML 提供了这个

<div class="row">
                <div class="col-md-4 portfolio-work-workplate">
                    <div class="row">
                        <div class="col-md-12 ignore">
                            <h2 class="portfolio-work-workplate-header">Booming Title</h3>
                        </div>
                    </div>
                    <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p>
                </div>
            </div>

这里是 SCSS

    .portfolio-work-workplate{
  text-align: center;
  height: 15vw;
  background:green;
}

.portfolio-work-workplate-header{
  // display:flex;
  // align-items: flex-start;
  // background:blue;
  // justify-content: center;

}

.portfolio-work-workplate-paragraph{
  top: 50%;
  transform: translate(0,150%);
// display: flex;
//   align-items: center;
//   text-align: center;
}

我留下了失败的 cmets，因为我试图使用 flexbox，但一直遇到一个奇怪的问题，它基本上只有 H2 和 P 字面上并驾齐驱，而我对它们所做的任何事情都是毫无意义的，因为它们不是不动。

这样做的目的是创建一大堆代码，看起来像 [ Top:Title, Bottom:Some words or a date ]，我试图包含 [] 的，因为我想保持某种美感.

我正在考虑在一个巨大的容器中在 4 个不同的部分中创建它。两个侧面带有 []，两个内部顶部是标题，底部是一些文本或日期。但在过去的几个小时里，我已经失败了好几次。

编辑：为澄清起见，我可以为它创建一个基本布局，但我想要一些更符合高级别的东西。对于任何混淆，我深表歉意。这是单个组件的最终游戏的image。

Answer 1

您要查找的术语是grid。将 sn-p 显示为全屏以查看网格。如果您想要一个在较小分辨率下永远不会进入单列的网格，您应该将 col-sm-4 类更改为 col-xs-4。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-4 portfolio-work-workplate">
      <h2 class="portfolio-work-workplate-header">Booming Title</h2>
      <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p>
    </div>
    <div class="col-sm-4 portfolio-work-workplate">
      <h2 class="portfolio-work-workplate-header">Booming Title</h2>
      <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p>
    </div>
    <div class="col-sm-4 portfolio-work-workplate">
      <h2 class="portfolio-work-workplate-header">Booming Title</h2>
      <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4 portfolio-work-workplate">
      <h2 class="portfolio-work-workplate-header">Booming Title</h2>
      <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p>
    </div>
    <div class="col-sm-4 portfolio-work-workplate">
      <h2 class="portfolio-work-workplate-header">Booming Title</h2>
      <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p>
    </div>
    <div class="col-sm-4 portfolio-work-workplate">
      <h2 class="portfolio-work-workplate-header">Booming Title</h2>
      <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4 portfolio-work-workplate">
      <h2 class="portfolio-work-workplate-header">Booming Title</h2>
      <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p>
    </div>
    <div class="col-sm-4 portfolio-work-workplate">
      <h2 class="portfolio-work-workplate-header">Booming Title</h2>
      <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p>
    </div>
    <div class="col-sm-4 portfolio-work-workplate">
      <h2 class="portfolio-work-workplate-header">Booming Title</h2>
      <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p>
    </div>
  </div>
</div>