Различный веб-макет между вставкой в ​​инспекторе и в файле с использованием vueJS - PullRequest
Новая
       23

Различный веб-макет между вставкой в ​​инспекторе и в файле с использованием vueJS

1 голос
/ 23 февраля 2020

Я сейчас разрабатываю свой собственный сайт, используя vueJS в качестве фреймворка, но мой вопрос основан исключительно на HTML / CSS, хотя, возможно, проблема в vueJS, поэтому я упоминая это. Я также использую bootstrap для макета.

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

<div class="row" align="center">
    <div class="col-sm-12 col-md-12">
        <ul class="links-list">
            <li class="links-list-item">
                <a href="" class="links-link">&gt;&nbsp;twitter</a>
            </li>
            <li class="links-list-item">
                <a href="" class="links-link">&gt;&nbsp;twitch</a>
            </li>
            <li class="links-list-item">
                <a href="" class="links-link">&gt;&nbsp;github</a>
            </li>
            <li class="links-list-item">
                <a href="" class="links-link">&gt;&nbsp;osu!</a>
            </li>
            <li class="links-list-item">
                <a href="" class="links-link">&gt;&nbsp;steam</a>
            </li>
            <li class="links-list-item">
                <a href="" class="links-link">&gt;&nbsp;youtube</a>
            </li>
        </ul>
    </div>
</div>

С этим пользовательским css, добавленным поверх: 

.links-list{
    width: 100%;
    padding: 1rem;
}
.links-list-item{
    display: inline;
    padding: 5px;
    font-size: initial;
    white-space: nowrap;
}
.links-list-item a{
    transition: all ease-in .3s;
    color: #aaaaaa;
    text-decoration: none;
}
.links-list-item a:hover{
    color: white;
    text-decoration: none;
}

Я понимаю, что если я удалю строку white-space: nowrap;, то получу аналогичный результат, но тогда он разбивается на пробелы между > и youtube, например, а не между каждым элементом списка.

Поэтому, когда я изменяю размер своего окна, чтобы оно стало немного меньше обычного размера рабочего стола, список не оборачивается и выходит за границы элемента div следующим образом: Wrong layout

Но я хочу, чтобы это выглядело так: Right layout

Это выглядит так, если я отправляю приведенный выше код в инспектор (F12) в браузере , Что очень странно для меня. Единственное отличие, которое я могу заметить, состоит в том, что в нем говорится, что между каждым элементом списка есть пробелы, а на странице без изменения между ними нет пробелов:

whitespaces

Мой вопрос: почему я вставляю это в браузер иначе, чем когда я позволяю рендереру vueJS отрендерить его? И как я могу изменить код, чтобы он выполнял ту же процедуру, что и при вставке в браузер?

PS: если вы хотите взглянуть на страницу на сервере и попробовать сами, вот мой сайт .

...