Начальная навигация с динамическим заголовком - PullRequest
Новая
       14

Начальная навигация с динамическим заголовком

0 голосов
/ 19 июня 2019

У меня есть приложениеactJS, которое использует Bootstrap для навигации по сайту.Контейнер, который устанавливает меню, выглядит следующим образом: 

<div className="container">
    <nav className="navbar navbar-light bg-light">
        <a className="navbar-brand" href="#">{this.state.planName}</a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
        </button>
        {this.renderMenu()}
    </nav>
</div>

{this.renderMenu ()} - это место, где я динамически помещаю элементы в структуру меню, и это прекрасно работает.

{this.state.planName} - это переменная, которая содержит динамическую строку длиной от 1 до 80 символов.

Мой вопрос такой: когда длина {this.state.planName} относительно мала,значок структуры меню (прямоугольник с 3 горизонтальными линиями) создается в верхней части контейнера и выравнивается по правому краю контейнера.Однако, когда длина {this.state.planName} относительно велика, значок структуры меню уменьшается и выравнивается по левому краю в контейнере.

Как заставить значок структуры меню всегда быть правильнымоправдано в контейнере и имеет только обертку {this.state.planName}?

Спасибо!

1 Ответ

0 голосов
/ 19 июня 2019

Поскольку ваш класс container, скорее всего, имеет стиль display: flex, он попытается дать минимальное пространство, необходимое для отображения всего элемента внутри его элемента.Поэтому, когда содержимое в navbar-brand становится слишком длинным, оно нажимает кнопку navbar-toggler вне строки, чтобы у него было достаточно места для всего (flex).Ваш лучший вариант - установить максимальную ширину на navbar-brand.

Попробуйте следующий CSS: 

.navbar-brand {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

Настройте max-width на нужный вам внешний вид.

...