отзывчивые кнопки навигации - PullRequest
Новая
       10

отзывчивые кнопки навигации

0 голосов
/ 14 мая 2018

Я создал раздел навигации для моего сайта с помощью кнопок. Выглядит хорошо, но когда я сверну окно, кнопки складываются друг в друга и начинают перекрываться. Можно ли как-нибудь сделать их более отзывчивыми, чтобы, возможно, они отображались друг под другом, когда окно минимизировано? Спасибо за любые предложения:) 

    <nav>

        <div class="nav">
            <a href="index.html" class ="button">Home</a>
            <a href="about.html" class ="button">Rooms</a>      
            <a href="Contact.html" class ="button">Contact</a>
            <a href="Testimonials.html"" class ="button">Testimonials</a>
            <a href="FAQ's.html" class ="button">FAQ's</a>
        </div>
    </nav>

CSS 

.nav {

    background-color: #A0BBF3;
    float: center;
    display: block;
    color: #0F49C5;
    text-align: center;
    padding: 1px 2px;
    font-variant: small-caps;
    font-size: 1.1em;

}


.nav a:hover {
    background-color: #0F49C5;
    color: #A0BBF3;

}
    .button {
      text-decoration: none;
      background-color: #4E7DE0;
      color: #A0BBF3;
      padding: 4px 8px 4px 8px;
      border-top: 2px solid #7298E9;
      border-right: 2px solid #2D63D4;
      border-bottom: 2px solid #2D63D4;
      border-left: 2px solid #7298E9;
    }

Ответы [ 3 ]

0 голосов
/ 14 мая 2018

Попробуйте использовать Bootstrap 4 классы, чтобы сделать вашу страницу отзывчивой. Bootstrap использует систему сетки и дисплей flexbox, с помощью которого вы можете легко задавать медиа-запросы. Вы можете установить значение, при котором ваша страница разрывается.

Например: 

<div class="col-md-4 col-lg-2">
<button class="btn btn-primary btn-block">Button</button>
</div>
0 голосов
/ 14 мая 2018

Вы можете добавить этот CSS к .nav, чтобы выровнять элементы так, как вы хотите. 

justify-content: center!important;
display: flex!important;

https://www.codeply.com/go/Ww1bAiQKLU

0 голосов
/ 14 мая 2018

Я бы предложил попробовать использовать flexbox

https://www.w3schools.com/css/css3_flexbox.asp

...