0

Хочу оставить только нижнюю границу.

Использовал Bootstrap класс .border-bottom, но отображается не правильно:

нижняя граница input элемента должна быть как в картинкеввод данных,

Если имеются соображения верстки без подчеркивания нижней границы, то скажите.

2
  • Учебные задания допустимы в качестве вопросов только при условии, что вы пытались решить их самостоятельно перед тем, как задать вопрос. Пожалуйста, отредактируйте вопрос и укажите, что именно вызвало у вас трудности при решении задачи. Например, приведите код, который вы написали, пытаясь решить задачу.
    – Bharatha
    20 мая 2018 в 14:32
  • покажите свой код
    – Randall
    20 мая 2018 в 17:06

3 ответа 3

0

Использовать .border-bottom идеологически неправильно. Надо переопределять стили для .form-control Отмените ненужные borders, нижнюю границу сделайте явно.

0

как уже написали выше, создаем свой класс, типа:

.form-control-s {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

И переписываем его вместо .border-bottom Должно получится что то типа <input class="form-control form-control-s" ... />

0

Пример

.form-container {
  padding: 1rem;
  min-height: 100vh;
  background: #555;
}
.form {
  max-width: 400px;
  width: 100%;
  background: #fff;
  padding: 1.5rem;
}
.form .form-control {
  border: none;
  border-bottom: 4px solid #ccc;
  border-radius: 0;
}
.form .form-control,
.form .form-control:focus {
  outline: none;
  box-shadow: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="d-flex flex-column justify-content-center align-items-center form-container">

  <form class="form">
    <div class="form-group">
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" required> 
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.