Как я могу добиться этого макета заголовка? - PullRequest
Новая
       4

Как я могу добиться этого макета заголовка?

0 голосов
/ 30 января 2020

Я пытаюсь реализовать следующий дизайн заголовка в Bootstrap.

enter image description here

Я пытался использовать систему сетки, но это не похоже на это должен быть путь к go. Код, который у меня есть, не помещает 2 кнопки в правом нижнем углу в правильное положение.

HTML: 

<div class="row">
  <div class="col-sm-12 mb-3">
    <div class="line"></div>
    <div class="row">
      <div class="col-sm-3 pt-4 pl-5">
        <img src="logo.png" class="logo" />
      </div>
      <div class="col-sm-5"></div>
      <div class="col-sm-4">
        <a class="btn btn-primary" href="#" role="button">choice 1</a>
        <a class="btn btn-primary" href="#" role="button">choice 2</a>
      </div>
    </div>
  </div>
</div>

CSS: 

.line {
  position: relative;
}

.line::after {
  content: "";
  background-color: #ed1e79;
  position: absolute;
  width: 100%;
  height: 20px;
  top: 90px;
  left: 0px;
  z-index: -1;
}

.btn {
  border-radius: 0 !important;
}

Ответы [ 2 ]

1 голос
/ 30 января 2020

line не должен быть элементом вашей разметки. Это должно быть фоновое изображение или псевдоэлемент в существующем элементе контейнера. Затем вы можете использовать гибкую структуру Bootstrap и выровнять две кнопки по вертикали в конце столбца. 

.bg-line {
    background-image: linear-gradient(180deg,
            transparent calc(50% - 6px),
            #ff0000 calc(50% - 6px),
            #ff0000 calc(50% + 6px),
            #ffffff calc(50% + 6px));
}
<link rel="stylesheet" 
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css"/>

<div class="bg-line d-flex justify-content-between align-items-end">
    <div class="col"><!-- flexes to fill space -->
        <img src="https://via.placeholder.com/90" class="logo" />
    </div>

    <div class="col-auto btn-group"><!-- shrinks to fit content -->
        <a class="btn btn-primary btn-sm" href="#" role="button">choice 1</a>
        <a class="btn btn-secondary btn-sm" href="#" role="button">choice 2</a>
    </div>
</div>

Демонстрация Fiddle

0 голосов
/ 30 января 2020

с использованием flex - d-flex, align-items - align-items-end и justify-content - justify-content-between это должно работать.

пример в CSS: 

header {
  margin: 10px;
  display: flex;
  justify-content: space-between;
  border: solid 2px black;
  padding: 10px;
  align-items: flex-end;
}

.img {
  height: 100px;
  width: 100px;
  border: solid 2px black;
  border-radius: 50%;
}

.btns {
  height: 20px;
  width: 150px;
  border: solid 2px black;
}
<header>
  <div class="img"></div>
  <div class="btns"></div>
</header>
...