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;
}

我留下了我的失败评论，因为我试图使用flexbox，但一直遇到一个奇怪的问题，它基本上只有H2和P字面上的颈部和颈部，我对他们所做的任何事都没有意义，因为他们不是不动了。

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

我想在一个巨大的容器中用4个不同的部分创建它。两侧有[]和两个内侧，顶部是标题，底部是一些文字或日期。但是在过去的几个小时里，我几次失败了。

编辑：为了澄清，我可以为它创建一个基本布局，但我想要更高级别的东西。我很抱歉有任何困惑。这是单个组件的最终游戏的image。

Answer 1

您正在寻找的术语是grid。将代码段显示为全屏以查看网格。如果您希望网格在较小分辨率下永远不会转到单个列，则应将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>

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

1 个答案: