Как реализовать это в Bootstrap4?

250

14 февраля 2018, 10:09

Нужно реализовать расположение двух элементов как на скриншоте при этом желательно чтобы они были в одном row. Логотип всегда должен быть по центру, а кнопка всегда по правой стороне.

Answer 1

Без использование bootstrap.
Используем абсолютное позиционирование, внутри relative контейнера.

.foot { 
  position: relative; 
} 
 
.center { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
} 
 
.inner { 
  margin: auto; 
  background-color: red; 
  width: 150px; 
  height: 40px; 
  text-align: center; 
  padding-top: 4px; 
} 
 
.right { 
  position: absolute; 
  top: 2px; 
  bottom: 2px; 
  right: 2px; 
  width: 40px; 
  height: 40px; 
  background-color: blue; 
  padding-top: 4px; 
}

<div class="foot"> 
  <div class="center"> 
	<div class="inner">центр</div> 
  </div> 
  <div class="right">право</div> 
</div>

Вариант на bootstrap

.centr { 
  margin: auto; 
  height: 40px; 
  width: 130px; 
  background-color: red; 
} 
 
.right { 
  background-color: blue; 
  height: 40px; 
  width: 40px; 
  float: right; 
} 
 
.nomargings { 
  margin-left: 0px !important; 
  margin-right: 0px !important; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="row nomargings"> 
  <div class="offset-2 col-8"> 
    <div class="centr"></div> 
  </div> 
  <div class="col-2"> 
    <div class="right"></div> 
  </div> 
</div>