Angular布局问题：如何实现文本与输入框同行且输入框居右？

Hey Dave, I get exactly what you're trying to do—having text on the left and an input aligned to the right in the same column, without messy nested rows. The issue with your current float:right approach is that the <h3> is a block-level element, so it takes up the full width of the column, pushing the floated input down to the next line. Let's fix this with Bootstrap's flex utilities, which are perfect for this scenario and keep your markup clean.

Solution: Use Bootstrap Flex Classes #

Instead of relying on floats, turn your col-7 container into a flex box. This lets you easily align items horizontally and vertically without breaking the layout. Here's the modified code:

<div class="row pt-5">
  <div class="col-4">Stuff</div>
  <div class="col-1">Stuff</div>
  <div class="col-7 d-flex align-items-center justify-content-between">
    <h3 class="text-danger mb-0">Some Text!</h3>
    <input type="text">
  </div>
</div>

Breakdown of the Classes: #

• d-flex: Converts the column into a flex container, making its direct children flex items that can be aligned horizontally.
• align-items-center: Vertically centers the text and input (remove this if you don't need vertical alignment).
• mb-0: Removes the default bottom margin from the <h3> to prevent extra spacing that might throw off alignment.
• justify-content-between: Pushes the <h3> to the left edge and the input to the right edge of the column, keeping them firmly on the same line.

Why Input Group Didn't Work for You #

Input groups are designed for attaching add-ons (like buttons or icons) directly to inputs, not for general horizontal alignment across a column. While you could force it to align right with extra classes, it's overkill here—flex layout is simpler and more purpose-built for this use case.

Bonus: Adding Spacing #

If you want some breathing room between the text and input, you can add a gap-3 class to the flex container (adjust the number for more or less space):

<div class="col-7 d-flex align-items-center justify-content-between gap-3">
  <!-- ... -->
</div>

This approach keeps your markup clean, avoids nested rows, and reliably keeps your text and input on the same line with proper alignment.

内容的提问来源于stack exchange，提问作者DaveD