Встроенные пункты меню
Я хочу, чтобы мои пункты меню не перекрывались и оставались в одной строке при уменьшении размера экрана.
Это мой код:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>My menu</title>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
<style>
</style>
</head>
<body>
<div class = "container-fluid">
<div class = "row">
<div class = "col-auto">
<a>Main page</a>
</div>
<div class = "col-auto">
<a>Second page</a>
</div>
<div class = "col-auto">
<a>Third page</a>
</div>
</div>
</div>
</body>
</html>Вы можете увидеть проблему на изображении выше:
Ребят, я хотел это реализовать с выпадающим меню, но менеджер сайта это не принимает
Чтобы пункты меню отображались в одной строке на маленьких дисплеях, как сказал @CBroe, уменьшите размер шрифта. Вы можете установить размер шрифта для текста, используя функцию Calc, например font-size: calc((100vw – 90px)/16).
Как насчет использования col-12 вместо col-auto?
Ответы 1
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>My menu</title>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"
integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
<style>
.row {
display: flex;
flex-wrap: nowrap;
}
</style>
</head>
<body>
<div class = "container-fluid">
<div class = "row">
<div class = "col-auto">
<a>Main page</a>
</div>
<div class = "col-auto">
<a>Second page</a>
</div>
<div class = "col-auto">
<a>Third page</a>
</div>
</div>
</div>
</body>
</html>В приведенном выше элементе кода останется одна строка, когда размер экрана небольшой, и для перехода к этому элементу будет использоваться полоса прокрутки.
В CSS внесены некоторые изменения, например, для отображения установлено значение flex, а для flex-wrap установлено значение без переноса.
Благодаря этому изменению пункты меню останутся на одной строке, и если их больше, чем может поместиться в области просмотра, появится горизонтальная полоса прокрутки, позволяющая пользователю прокручивать по горизонтали, чтобы увидеть остальные элементы.
Тогда вам, вероятно, придется либо уменьшить размер шрифта, либо поля/отступы. Но, возможно, с самого начала все это не должно быть конструкцией row/col; В конце концов, у BS есть getbootstrap.com/docs/5.3/comComponents/navbar.