如何让带列的两行元素并排？Bootstrap Vue布局问题求助

Hey there, let's work through your layout problem. Looking at your code, there are a few key issues that are probably making your current result (screenshot 1) not match the layout you want (screenshot 2):

1. Grid Column Count Mismatch #

Bootstrap's grid system is built on a 12-column layout. Right now, each of your rows has 7 columns set to sm="1"—that only uses 7 out of 12 available columns, leaving a big empty space on the right side of each row. This is likely why your inputs are sitting lopsided instead of filling the space properly.

2. Missing Spacing Controls #

Your .form class only adds vertical margins and a border, but there's no spacing between your rows or columns. That can make your inputs look cramped or misaligned compared to your target layout.

Revised Code Examples #

Let's adjust your code to fix these issues. Here are two common solutions depending on what your target layout (screenshot 2) looks like:

Option 1: Auto-sizing Columns (Wrap When Needed) #

If you want inputs to take up only as much space as they need, and wrap to the next line when there's no room, use sm="auto" for your columns. This keeps things flexible and responsive:

<div class="form">
  <b-row class="g-2">
    <!-- First 7 inputs -->
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <!-- Second 7 inputs -->
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="auto">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
  </b-row>
</div>

Option 2: Fixed Equal-Width Columns (Two Rows) #

If you want your inputs to be evenly spaced across two rows, adjust the column widths to fit the 12-column grid. For example, use sm="2" for 6 inputs per row (6*2=12), and make the 7th input span the full row:

<div class="form">
  <b-row class="g-2 mb-2">
    <b-col sm="2">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="2">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="2">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="2">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="2">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="2">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
  </b-row>
  <b-row class="g-2">
    <b-col sm="2">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="2">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="2">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="2">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="2">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="2">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
    <b-col sm="12">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla"></b-form-input>
    </b-col>
  </b-row>
</div>

Optimized CSS #

Add padding to your .form class so inputs don't sit right against the border:

.form {
  margin-top: 1%;
  margin-bottom: 1%;
  border: 1px solid rgb(210, 210, 223);
  padding: 1rem; /* Adds inner spacing */
}

Quick Tips #

• Use g-* classes (like g-1, g-3) on b-row to adjust column spacing—higher numbers mean more space.
• Use mb-* classes (like mb-2, mb-3) on b-row to add space between rows.
• If you need your layout to look good on mobile, adjust the sm breakpoint to xs if you want the columns to stack earlier.

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