Bootstrap 4 - отзывчивый + центрированный и завернутый в слово navbar-бренд

Question

Я пытался создать bootstrap 4 navbar с центрированным брендом navbar (текст) с эмблемой слева и ссылками справа. Мне удалось это сделать, но я был почти верным. У меня большое фирменное наименование, поэтому мне нужно, чтобы текст был перенесен, когда я go ниже определенной ширины, но вместо переноса текста он отталкивает другие элементы перед переносом, как я могу это исправить?

Текущий код:

.embelem{
    height:40px;
    width:40px;
}

@media (min-width: 768px) {
    .abs-center-x {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align:center;
    }
    #title {
        padding: 13px
    }
}

Answer 1

заменить ваш navbar-бренд css на этот код ниже. и удалите класс .text-wrap, чтобы он работал

.embelem{
  height:40px;
  width:40px;
}
.navbar-brand {
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  display: block;
  width: 50%;
  min-width: 1px;
}

@media (min-width: 768px) {
  .abs-center-x {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      text-align:center;
  }
  #title {
      padding: 13px
  }
}

Answer 2

Применение этих стилей приведет к переносу текста без усечения:

@media (max-width: 768px){
    .navbar-brand{
        flex: 1 0 100px;
        text-align: center;
    }
}

.embelem{
    height:40px;
    width:40px;
}

@media (max-width: 768px){
    .navbar-brand{
        flex: 1 0 100px;
        text-align: center;
    }
}
 
@media (min-width: 768px) {

    .abs-center-x {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align:center;
    }
    #title {
        padding: 13px
    }
}