Как я могу показать недопустимую границу проверки при вводе с помощью кнопки в Bootstrap?

Question

Как Bootstrap обрабатывает недопустимую границу ошибки проверки на входе (с помощью кнопки)?Из документации Bootstrap я прочитал следующее:

Bootstrap включает в себя стили проверки для ошибок, предупреждений и состояний успешности в элементах управления формы.Чтобы использовать, добавьте .has-warning, .has-error или .has-success к родительскому элементу.Все .control-label, .form-control и .help-block в этом элементе получат стили проверки.

В соответствии с любой информацией, предоставленной выше, я управлял следующей скрипкой:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group has-error">
        <label for="exampleInput1">Label</label>
        <div class="input-group">
          <input type="text" class="form-control">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default" ><span class="glyphicon glyphicon-question-sign"></span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Как исправить боковую границу кнопки?

Answer 1

Попробуйте это простое решение.

.btn.button-border{
border-color:#a94442;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group has-error">
        <label for="exampleInput1">Label</label>
        <div class="input-group">
          <input type="text" class="form-control">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default button-border" ><span class="glyphicon glyphicon-question-sign"></span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Если вы хотите использовать его с кнопкой и хотите, чтобы граница ошибки распространялась и на эту кнопку, вам нужно добавить несколько CSS.

.has-error .input-group-btn{
     border-color: #a94442;
     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
     box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

И это должно работать, я заглянул в документы по начальной загрузке, и они используют input-group-addon.

Answer 3

Есть два условия, чтобы попробовать.Если вы можете использовать bootstrap, просто замените btn-default на btn-danger или создайте стиль border и примените его к кнопке

Answer 4

Просто добавьте стили CSS в ваш html, например:

.has-error .input-group-btn > button{
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

Таким образом, вы всегда будете получать границы для ваших кнопок, когда они непосредственно являются потомками класса .input-group-btn.

Не забывайте, что вам нужно создать такую ​​же методологию для других проверок .has-warning и .has-success.

Любой вопрос по этому поводу, не стесняйтесь задавать.:)

Answer 5

Я нашел другое решение для моей проблемы и все еще держу ввод и кнопку отдельно в соответствии с комментарием Every Screamer.

Просто добавив это в мой CSS:

.has-error .input-group .form-control, .has-warning.input-group .form-control, .has-success .input-group .form-control {
    z-index: 3;
}

.has-error .input-group .form-control,
.has-warning.input-group .form-control,
.has-success .input-group .form-control {
  z-index: 3;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group has-error">
        <label for="exampleInput1">Label</label>
        <div class="input-group">
          <input type="text" class="form-control">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-question-sign"></span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Если это вызовет проблемы, проблемы и / или ошибки, пожалуйста, дайте мне знать.

Answer 6

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group has-error">
        <label for="exampleInput1">Label</label>
        <div class="input-group">
          <input type="text" class="form-control">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default" ><span class="glyphicon glyphicon-question-sign"></span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Если вы используете bootstrap 3.x.x, вам нужен стиль с дополнительными CSS.Вот пример:

Fiddle