Выравнивание компонентов на веб-странице - PullRequest
Новая
       5

Выравнивание компонентов на веб-странице

1 голос
/ 25 апреля 2020

Я очень новичок в создании веб-приложений, поэтому могу поспорить, что ответ на этот вопрос очень прост.

На моей странице, где я использую Bootstrap, у меня есть три строки, каждая из которых имеет label и div. Первые два div содержат текстовое поле, но третье содержит два radio s и два labels. Расположение не очень хорошее, потому что рад ios и метки в третьем ряду смещены влево, а текст немного выше.

Изображение текущей ситуации

Как добавить дополнительный пробел, чтобы начало первого переключателя было выровнено по началу текстового поля выше и в том же самом строка в качестве заголовка? 

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

<div class="form-group row">
    <label class="col-form-label col-3 text-right">Name</label>
    <div class="col-7">
        <input type="text" class="form-control" name="name" value="${task.name}"/>
    </div>
</div>
<div class="form-group row">
    <label class="col-form-label col-3 text-right">Description</label>
    <div class="col-7">
        <input type="text" class="form-control" name="description" value="${task.description}"/>
    </div>
</div>
<div class="form-group row">
    <label class="col-form-label col-3 text-right">Finished</label>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="finishedTrue" name="finished" class="custom-control-input" value="true">
        <label class="custom-control-label" for="finishedTrue">True</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="finishedFalse" name="finished" class="custom-control-input" value="false" checked>
        <label class="custom-control-label" for="finishedFalse">False</label>
    </div>
</div>

1 Ответ

0 голосов
/ 25 апреля 2020

Добавьте padding-left: 15px на него. Используя класс px-3 (px-3 = 16px).

, для большей точности, вы можете добавить пользовательский CSS, используя 

.any_class {
    padding-left: 15px;
}


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

<div class="form-group row">
  <label class="col-form-label col-3 text-right">Name</label>
  <div class="col-7">
    <input type="text" class="form-control" name="name" value="${task.name}" />
  </div>
</div>
<div class="form-group row">
  <label class="col-form-label col-3 text-right">Description</label>
  <div class="col-7">
    <input type="text" class="form-control" name="description" value="${task.description}" />
  </div>
</div>
<div class="form-group row">
  <label class="col-form-label col-3 text-right">Finished</label>
  <div class="pl-3">
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" id="finishedTrue" name="finished" class="custom-control-input" value="true">
      <label class="custom-control-label" for="finishedTrue">True</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" id="finishedFalse" name="finished" class="custom-control-input" value="false" checked>
      <label class="custom-control-label" for="finishedFalse">False</label>
    </div>
  </div>
</div>
...