Пример формы Bootstrap4 отображается неправильно

ProgramBox

Пример формы Bootstrap4 отображается неправильно

Post author:admin
Запись опубликована:1 сентября, 2022
Post category:Вопросы по программированию

#html #css #vue.js #bootstrap-4 #bootstrap-modal

#HTML #css #vue.js #bootstrap-4 #bootstrap-модальный

Вопрос:

Я пытаюсь создать простую форму электронной почты, как в документах Bootstrap 4, но по какой-то причине форматирование неправильное.

Вот как выглядит пример:

Но по какой-то причине это то, что он компилирует в моем проекте:

Очевидно, что в моей кодовой базе / среде есть что-то, что мешает макету. Почему мои поля не в отдельных строках, как в примере? Почему нет интервала между элементами? Почему кнопка отправки не синяя? Это беспорядок. Моя зависимость bootstrap 4 установлена неправильно?

Я использую точный html из примера. Код ниже.

 <template>
<form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</template>

main.ts

 import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// @ts-ignore
createApp(App).use(store).use(router).mount('#app')

1. Возможно, вам потребуется импортировать CSS в ваш проект. Можете ли вы показать свой main.js ? Также проверьте BoostrapVue , если вы его еще не используете

2. Обновил мой пост с помощью моего файла main.ts. Сейчас я изучаю BootstrapVue

3. На данный момент добавьте в main.js : import 'bootstrap'; и import 'bootstrap/dist/css/bootstrap.min.css';

4. Есть 2 импорта, убедитесь, что вы используете оба. Вам также понадобятся оба BootstrapVue , если вы решите использовать это.

5. @Dan Довольно интересно, типичный код импорта для вашего main.ts файла для включения Bootstrap4.5 в ваш проект действительно не работает для Vue3, вам нужно использовать 2 импорта, которыми вы поделились, а не то, что bootstrap-vue.org документы указывают. По-видимому, команда Bootstrap стремится поддерживать Vue3 через Bootstrap5 к концу 2020 года. github.com/bootstrap-vue/bootstrap-vue/issues/5196

Ответ №1:

если вы ищете простое решение для статического веб-сайта или базового материала, все, что вам нужно сделать, это добавить этот cdn в свой html

 
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

и этот загрузочный javascript cdn для выпадающих списков и панели навигации

 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

и jQuery cdn

проверьте эту ссылку для предварительного просмотра в реальном времени

https://stackblitz.com/edit/web-platform-ss4nvu?file=script.js

в основном это

     <link rel="stylesheet" type="text/css"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

в теге head 🙂

но я вижу, что вы упомянули vue js в тегах, которые вы ищете для ответа, поэтому я также рекомендую перейти на веб-сайт VueJS bootstrap, что удивительно, если у вас возникнут какие-либо проблемы, я также доступен в gmail 🙂

dolev146@gmail.com

1. Нужно ли мне все еще добавлять cdn в мои HTML-заголовки, если я использую npm install?

2. если вам нужно быстрое и грязное решение, найдите HTML-файлы в вашем приложении vue и вставьте приведенный выше код, как я сделал здесь stackblitz.com/edit/vue-hajqhh?file=public/index.html

3. что делать, если вы хотите хорошей практики, вам придется пойти и прочитать этот сайт, другого варианта нет bootstrap-vue.org bootstrap, специально созданный для vue

4. К вашему сведению, похоже, что Bootstrap 4.5 пока не работает с Vue3 (что, к сожалению, я и использую). github.com/bootstrap-vue/bootstrap-vue/issues/5196

Ответ №2:

Вы забыли связать файлы css из bootstrap.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

скопируйте и вставьте его в начало вашего html

также прочитайте документацию по началу работы: bootstrap get started doc

Метки: Пример формы Bootstrap4 отображается неправильно