如何使用列彼此相邻两行？

Question

我遇到了行和列的问题。 无论我尝试什么，我都无法解决它。

我明白......见capture 1， 但我想要一些像...... capture 2。 我还会插入我的代码，以便您可以看到它。

HTML

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

CSS

.form {
    margin-top: 1%; 
    margin-bottom: 1%; border: 1px solid rgb(210, 210, 223);
}

Answer 1

您需要的物品是否有序？否则你可以这样做

b-row{
  display: flex;
  flex-direction: column;
}

Answer 2

您可以使用float

Stack Snippet

＆＃13;

＆＃13;

b-col {
  float: left;
  width: 48%;
  margin: 1%;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

＆＃13;

<div class="form">
  <b-row>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">1
      </b-form-input>
    </b-col>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">2
      </b-form-input>
    </b-col>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">3
      </b-form-input>
    </b-col>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">4
      </b-form-input>
    </b-col>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">5
      </b-form-input>
    </b-col>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">6
      </b-form-input>
    </b-col>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">7
      </b-form-input>
    </b-col>
  </b-row>
  <b-row>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">8
      </b-form-input>
    </b-col>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">9
      </b-form-input>
    </b-col>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">10
      </b-form-input>
    </b-col>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">11
      </b-form-input>
    </b-col>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">12
      </b-form-input>
    </b-col>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">13
      </b-form-input>
    </b-col>
    <b-col sm="1">
      <b-form-input size="sm" type="text" v-model="connection.bla" placeholder="bla">14
      </b-form-input>
    </b-col>
  </b-row>
</div>

＆＃13;

＆＃13;

＆＃13;