Центрированные заголовки с удивительным шрифтом в Bootstrap Адаптивный дизайн - PullRequest
Новая
       19

Центрированные заголовки с удивительным шрифтом в Bootstrap Адаптивный дизайн

0 голосов
/ 31 января 2019

Я пытаюсь выполнить следующее (см. Изображение): enter image description here

<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h1>5 BENEFITS FOR $5</h1>  
</div>
</div>

<div class="row">
<div class="col-md-6">
<h2>BENEFIT NAME</h2>
<p>A very brief but captivating description of the benefit.</p>
</div><!-- col -->

<div class="col-md-6">
<h2>BENEFIT NAME</h2>
<p>We’re just getting started - as our club grows, so will the benefits!</p>
</div><!-- col -->
</div> <!--row-->

<div class="row">
<div class="col-md-6">
<h2>BENEFIT NAME</h2>
<p>A very brief but captivating description of the benefit.</p>
</div><!-- col -->

<div class="col-md-6">
<h2>BENEFIT NAME</h2>
<p>We’re just getting started - as our club grows, so will the benefits!</p>
</div><!-- col -->
</div> <!--row-->

<div class="row">
<div class="col-md-6">
<h2>BENEFIT NAME</h2>
<p>A very brief but captivating description of the benefit.</p>
</div><!-- col -->

<div class="col-md-6">
<h2>AND MORE</h2>
<p>We’re just getting started - as our club grows, so will the benefits!</p>
</div><!-- col -->
</div> <!--row-->

</div> <!--container-->


#front-page-2 h2 {
  position: relative; /* Helps us control overlap */
  padding-left: 80px; /* Creates space for the Phone Icon */
  padding-top:15px;
  }

#front-page-2 h2:after {
  content: '\f111';
  font-family: fontAwesome;
  font-size: 2em;
  position: absolute;
  left: 0; /* Adjust as needed */
  top: 3px; /* Adjust as needed */
  }

Я использую Bootstrap 4, с 3 строками и двумя столбцами col-sm-6 на каждый ряд.Мне нужны круги, чтобы выровнять даже.В настоящее время, когда заголовок столбца изменяется по длине, например «И БОЛЬШЕ», круг не совпадает с остальными.Я также хочу, чтобы каждый столбец col-sm-6 центрировался в контейнере, поэтому он центрируется с основным заголовком 5 Преимущества за 5 долларов (см. Изображение ниже).Я также хотел бы использовать шрифт awesome с заголовком h2.

Спасибо, Жюль

1 Ответ

0 голосов
/ 01 февраля 2019

Самым простым решением может быть использование position:absolute для значков. <h2> является блочным элементом, поэтому вы можете легко размещать значки на левой стороне.Положение круга не зависит от длины текста. 

h2{position:relative;text-align:center}
.fa-circle{position:absolute;left:0;top:50%;transform:translateY(-50%)}

/*DEMO PURPOSE*/
h2{border:1px red solid;padding-top:1rem;padding-bottom:1rem}
<script defer src="https://use.fontawesome.com/releases/v5.7.0/js/all.js"></script>

<h2><i class="fas fa-circle"></i>Lorem Ipsum</h2>
<h2><i class="fas fa-circle"></i>Dolor sit Amet</h2>
<h2><i class="fas fa-circle"></i>Some text</h2>
...