Bootstrap - Перекрывающиеся элементы внутри блока карты
Я схожу с ума здесь. У меня есть этот кусок Html, и когда экран меняет размер, слова и метки перекрываются, при изменении размера экрана, прежде чем он попадет в col-md. Каждая буква переходит в следующую строку, поскольку размер экрана уменьшается до среднего, и это выглядит ужасно. Кто-нибудь знает, в чем может быть проблема?
<div class = "col-xs-12 col-md-12 col-lg-12">
<div class = "row">
<div class = "col-xs-12 col-md-12 col-lg-2 ">
<div class='card'>
<div class='card-block' style = "padding-left: 10px">
<form>
<div class = "form-group row">
<label for = "inputEmail3" class = "col-sm-2 col-form-label">Email</label>
<div class = "col-sm-10">
<input type = "email" class = "form-control" id = "inputEmail3" placeholder = "Email">
</div>
</div>
<div class = "form-group row">
<label for = "inputPassword3" class = "col-sm-2 col-form-label">Password</label>
<div class = "col-sm-10">
<input type = "password" class = "form-control" id = "inputPassword3" placeholder = "Password">
</div>
</div>
<fieldset class = "form-group">
<div class = "row">
<legend class = "col-form-label col-sm-2 pt-0">Radios</legend>
<div class = "col-sm-10">
<div class = "form-check">
<input class = "form-check-input" type = "radio" name = "gridRadios" id = "gridRadios1" value = "option1" checked>
<label class = "form-check-label" for = "gridRadios1">
First radio
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "radio" name = "gridRadios" id = "gridRadios2" value = "option2">
<label class = "form-check-label" for = "gridRadios2">
Second radio
</label>
</div>
<div class = "form-check disabled">
<input class = "form-check-input" type = "radio" name = "gridRadios" id = "gridRadios3" value = "option3" disabled>
<label class = "form-check-label" for = "gridRadios3">
Third disabled radio
</label>
</div>
</div>
</div>
</fieldset>
<div class = "form-group row">
<div class = "col-sm-2">Checkbox</div>
<div class = "col-sm-10">
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" id = "gridCheck1">
<label class = "form-check-label" for = "gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<div class = "form-group row">
<div class = "col-sm-10">
<button type = "submit" class = "btn btn-primary">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class = "col-xs-12 col-md-12 col-lg-10 ">
* A Grid will go here after the user signs in *
</div>
</div>
</div>
Мне просто нужно, чтобы это было на странице. На странице фактически 4 раздела. Код, который я вставил, предназначен для верхнего левого и правого квадрантов. Таким образом, в верхнем левом углу будет информация, вводимая пользователем. В правом верхнем углу будет отображаться настоящая сетка. Нижние квадранты покажут что-то еще. Моя проблема в том, что я все еще застрял в том, чтобы левый верхний квадрант выглядел правильно.
А какой версией пользуетесь? Я заметил, что у вас есть такие имена классов, как card-block, которых, похоже, нет в BS4.
Мы использовали Bootstrap 3, но недавно обновились до bootstrap 4. Я считаю, что блок карты теперь является телом карты.
Учитывая устаревший код, который вы представляете выше, я бы порекомендовал очистить его, чтобы он, по крайней мере, соответствовал тому, что использует Bootstrap 4, чтобы мы могли устранить проблему, выходящую за рамки «Пользователь просто использует неправильные классы»
Можете ли вы уточнить, для чего служит ваша вложенная сетка? Также сетка
col-xs-*была удалена в Bootstrap 4.