如何将两个表单输入框对齐？

Question

我有一个带有表单的模态框（使用Bootstrap-Vue和Vue2）。每一行有两个字段。如果用户未输入有效值到字段中，该字段的状态返回false，使框变为红色，并在字段下方添加一条消息。但我希望同一行的两个字段能够对齐。问题如下:

当没有显示出错误时，它看起来很好:

代码如下:

<div class="text-right">
  <div class="row">
    <div class="col-md-6">
      <div class="modal-label">שדה 1</div>
      <b-form-input
       :class="{ 'invalid-form-box': !stateField1(), 'modal-input': true}"
       v-model="course_number"
       type="number"
       placeholder="שדה 1"
       :trim="trimInput"/>
      <p v-if="!stateField1()" class="invalid-form-text">
        לא חוקי 1
      </p>
      <p v-if="!stateField2() && stateField1()" class="invalid-form-text"></p>
    </div>

    <div class="col-md-6">
      <div class="modal-label">שדה 2</div>
      <b-form-input
       :class="{ 'invalid-form-box': !stateField2(), 'modal-input': true}"
       v-model="score"
       type="number"
       placeholder="שדה 2"
       :trim="trimInput"/>
      <p v-if="!stateField2()" class="invalid-form-text">
        לא חוקי 2
      </p>
      <p v-if="!stateField1() && stateField2()" class="invalid-form-text"></p>
    </div>
  </div>
...
</div>

<style scoped>
  div {
    margin: auto 0;
    direction: rtl;
  }

  input {
    direction: rtl;
  }

  .modal-label {
    margin-bottom: 0.5rem;
  }

  .modal-input {
    margin-bottom: 0.5rem;
  }

  .modal-header .close {
    padding: 1rem 1rem !important;
    margin: -1rem auto -1rem -1rem !important;
  }
  
  .invalid-form-text {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
  }

  .invalid-form-box:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 25%);
    background-repeat: no-repeat;
  }

  .invalid-form-box {
    border-color: #dc3545;
    background-repeat: no-repeat;
  }
</style>

我该如何让它们对齐呢？我尝试用<div>、<label>和<span>替换了<p>，还尝试过使用<br>。

- vesii

---

Vue渲染到浏览器的是什么HTML呢？因为这是你的CSS要处理的内容。 - David Thomas

不确定是怎么发生的，但我试图为 https://dev59.com/07P3oIgBc1ULPQZFguKQ#71231747 创建一个边界。请忽略这个主题。 - vesii

Answer 1

移动是由于在以下规则中的 margin: auto 0; 造成的：

div {
  margin: auto 0; ❌ causes layout shift when error message appears
}

该规则将所有 div 的顶部和底部边距设置为 auto。注意当没有错误时，div.col-md-6 和 div.modal-label 的垂直边距：

而当有错误时，外部边距会折叠以腾出空间：

解决方案

我认为您只是尝试将水平边距设置为 0。您可以使用以下方式实现：

div {
  margin-right: 0;
  margin-left: 0;
}

演示

- tony19

Answer 2

如果您使用BootstrapVue，您可以这样做：

<b-row align-v="start">
  <b-col cols="6">
    // Whatever goes in your first column
  </b-col>
  <b-col cols="6">
    // Whatever goes in your second column
  </b-col>
</b-row>

- Tristan

Answer 3

你可以将这个添加到父级 div 中。

display: flex;
align-items: center;
justify-content: center;

这将使两个输入对齐并排。

- Abhishek Kokate

Answer 4

我相信这行代码负责显示或隐藏错误。

<p v-if="!stateField2()" class="invalid-form-text">

你可以在每个文本框下面加上这个 p 标签。

而你的 invalid-form-text 类可以像这样。

.invalid-form-text{
     visibility: hidden;
}

这里的重点是，如果您使用可见性样式来显示隐藏元素，则无论它们是可见还是隐藏，该元素仍将在DOM中占用空间，并且不会干扰元素的对齐。

- Surinder Singh

Answer 5

一种方法是将.invalid-form-text元素的高度设置为0px，并确保其溢出设置为可见（如果尚未设置）。

如果您需要向元素添加一些边距，可以将现有的边距更改为transform: translateY，这可以防止它影响dom布局中的其他元素。

.invalid-form-text{
   height: 0;
   overflow: visible;
   margin: 0px;
   transform: translateY(0.25rem);
}

- Kyle

Answer 6

你可以有两种方法来实现这个。我建议使用第一种。

1. 将 'invalid-form-text' 标签的位置设置为绝对定位，并将其位置固定在您想要的位置，这将消除此布局移位。

2. 如果您正在使用 flex，请使用 align-items: flex-start，这样当错误出现时，对齐方式将使它们对齐到 flex 开始，并且它们将出现在同一行中。（它应该有效，但由于其他 CSS 冲突可能无法正常工作-如果没有，请询问）

- prograk