时间戳

首页 > 解决方案 > 网页上组件的对齐方式

html - 网页上组件的对齐方式

问题描述

我对创建 Web 应用程序非常陌生，所以我敢打赌这个问题的答案非常简单。

在我使用 Bootstrap 的页面上，我有三行，每行都有 alabel和 a div。前两个div包含文本字段，但第三个包含两个radios 和两个labels。布局不好，因为第三行的单选和标签向左移动，文字高了一点。

现状图

如何添加一些额外的空间，使第一个单选按钮的开头与上方文本字段的开头对齐，并与标题在同一行？

<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>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

加上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>

推荐阅读