b-nav-form в примере bootstrap-vue некорректно отображается

Пример панели навигации в документации, здесь, включает раздел <b-nav-form>, встроенный в панель навигации , содержащий <b-form-input> и <b-button>. Но когда я пытаюсь использовать этот образец на своей странице, отображается только поле ввода (оно находится в верхней части кнопки - если я удалю <b-form-input>, я вижу кнопку). У меня есть пример проблемы с jsfiddle здесь.

Их пример выглядит так: Ожидаемая панель навигации

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

Это проблема с версией (версиями) библиотек / css, которые я использую? (В настоящее время последняя из них: bootstrap 4.0.0, bootstrap-vue 2.0.0-rc.1, vue 2.5.13, и я пробовал несколько комбинаций из более ранних версий.) Я не могу сказать, какие версии библиотек bootstrap-vue.js.org использует.


vue.js twitter-bootstrap bootstrap-vue
person ecp    schedule 06.03.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

попробуй это :

<b-nav-form> <b-form-input class="mr-sm-2" type="text" placeholder="Search"></b-form-input> <b-button class="my-2 my-sm-0" type="submit">Search</b-button> </b-nav-form>

person Ciradil    schedule 11.07.2018
comment
Возможно, вам стоит подумать о добавлении нескольких строк, чтобы подчеркнуть, почему ваше предложение сработает и / или где есть отличия от исходного сообщения. - person norok2; 11.07.2018
comment
Интересно ... Замена <b-form-input .../> на <b-form-input ...></b-form-input> заставила его работать. (Ответ Ciradil также удалил атрибуты size="sm". Но это было изменение тегов открытия / закрытия, а не самозакрывающегося тега.) - person ecp; 15.09.2018