Почему мои стили начальной загрузки применяются неправильно?

Я скопировал эту форму со страницы начальной загрузки на свой сайт.

<form>
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
</form>

По какой-то причине стиль начальной загрузки применяется неправильно. Кнопка имеет рамку-радиус слева.

скриншот

Я добавил Bootstrap через npm, и я использую это

../../../node_modules/bootstrap/dist/css/bootstrap.min.css

в angular-cli.json

РЕДАКТИРОВАТЬ: Я загрузил min.css из CDN, включил его, и он работает. Похоже, это проблема с версией npm. Может я использую не тот файл?


html twitter-bootstrap bootstrap-4 ng-bootstrap
person NDDT    schedule 17.01.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Как вы уже догадались, это из-за версии Bootstrap. Разметка, которую вы используете, предназначена для бета-версии 3 и последней версии Bootstrap 4. Последний Bootstrap 4 был фактически вчера.

Подробно:
Из Bootstrap 4 beta 2 в beta 3 не так много изменений, но группа ввода компонент был фактически переписан, как было указано в примечания к выпуску бета 3 от 28 декабря 2017 г.

В бета-версии 2 соответствующий класс был .input-group-addon, а разметка была следующей:

<div class="input-group">
    <input type="text" class="form-control" placeholder="Placeholder">
    <button class="input-group-addon btn btn-outline-secondary" type="button">Button</button>
</div>

В бета-версии 3 .input-group-addon был заменен на .input-group-{prepend|append}, а разметка изменила это:

<div class="input-group">
    <input type="text" class="form-control" placeholder="Placeholder">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
</div>
person dferenc    schedule 19.01.2018

arrow_upward
1
arrow_downward

Попробуйте изменить свой код, как показано ниже

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <span class="input-group-btn">
      <button class="btn btn-outline-secondary" type="button">Button</button>
    </span>
  </div>
</form>

person RAHUL VENNEERS    schedule 17.01.2018
comment
Я попробовал это, и это тоже сломало мою навигационную панель, не улучшив ввод. Когда я переместил тег ссылки как оператор импорта в свой файл styles.css, произошло то же самое. Я использую Bootstrap v4.0.0-beta.2, это создает проблему? - person NDDT; 17.01.2018
comment
Я проверил это, и на странице ngBootstrap говорится, что он протестирован с 4.0.0-beta.3 - person NDDT; 17.01.2018