Bootstrap: удалить границу поля формы

Я новичок в CSS, использую Bootstrap и хочу 9X_twitter-bootstrap использовать формы двумя способами: с рамками 9X_bootstrap-framework вокруг полей формы или без них. Как я могу 9X_twitter-bootstrap добиться этого наилучшего? Вот пример формы 9X_bootstrap-framework Bootstrap, для которой я хочу удалить границы: plnkr.co/edit/xxx1Wy4kyCESNsChK4Ra?p=preview.

Из 9X_bootstrap-framework любопытства я этого хочу потому, что сначала 9X_bootstrap-framework хочу показать пользователю данные, которые 9X_bootstrap-framework у него есть, а затем переключить отображение 9X_bootstrap-framework границ в зависимости от того, находится 9X_twitter-bootstrap ли форма в режиме «редактирования» или нет. Пользователь 9X_twitter-bootstrap может войти в режим «редактирования», щелкнув 9X_bootstrap-framework ссылку «изменить», или просто начать редактирование 9X_bootstrap-framework поля.

25
0

twitter-bootstrap
3
Общее количество ответов: 3

Ответ #1

Ответ на вопрос: Bootstrap: удалить границу поля формы

В этом примере, чтобы удалить границу, просто 9X_twitter-bootstrap напишите:

.form-control { border: 0; }

В вашем файле CSS.

Это приведет 9X_twitter-bootstrap к удалению границ со всех полей формы, однако 9X_bootstrap-framework более гибким подходом было бы присоединение 9X_bootstrap-framework класса к полям формы, которые не должны 9X_bootstrap-framework иметь границы, поэтому ваш HTML-код будет 9X_bootstrap-framework примерно таким:

и ваш CSS:

.no-border { border: 0; box-shadow: none; /* You may want to include this as bootstrap applies these styles too */ }

73
0

Ответ #2

Ответ на вопрос: Bootstrap: удалить границу поля формы

В Bootstrap 4 вы можете добавить к элементу 9X_bootstrap-framework класс border-0, чтобы удалить его границу.

Другие 9X_bootstrap-framework классы, которые вы можете использовать - Bootstrap 4 Borders

 /* remove all borders */  /* remove top border */  /* remove border on the right */  /* remove bottom border */  /* remove border on the left */

А 9X_twitter-bootstrap вот рабочий пример того, что вы спросили:

$("#myButton").click(function() { $("#myInput").toggleClass('border-0') });

28
0

Ответ #3

Ответ на вопрос: Bootstrap: удалить границу поля формы

Пограничный класс из Bootstrap v5.2.

9X_twitter-bootstrap

1
1
  • Вы можете удалить класс `border` в ...