Каков правильный способ создания этого html chunk

Question

Мне любопытно, как лучше всего правильно создать компонент моего сайта, я говорю строго по HTML и CSS. Я использую Bootstrap 3 с jquery 3.1.1.

Я пытаюсь создать своего рода шаблон 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 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>