在Bootstrap 4中的3标签/输入旁边放置一个5行选项列表

Question

我的表单上有一个相当大的选择控件，我想利用它旁边的空间：

我不想使用表格，因为这会对移动设备造成错误的影响。我需要的是：

这是我的代码：

<div class="form-group row">
  <label class="col-sm-2 col-form-label" for="input1">label1</label>
  <div class="col-sm-4">
    <input type="text" class="form-control" size="50" name="input1" value=""/>
    <span class="messages"></span> </div>
  <label class="col-sm-2 col-form-label" for="ausbildung">option label</label>
  <div class="col-sm-4">
    <select class="form-control" id="Select1" name="ausbildung" multiple size="5">
        <option value="3">option 1</option>
      <option value="8">option 2</option>
      <option value="9">option 3</option>
      <option value="10">option 4</option>
      <option value="11">option 5</option>
      <option value="12">option 6</option>
      <option value="17">option 7</option>
      <option value="19">option 8</option>
      <option value="27">option 9</option>
    </select>
    <span class="messages"></span> 
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-2 col-form-label" for="input2">label2</label>
  <div class="col-sm-4">
    <input type="text" class="form-control" size="10" name="input2" value=""/>
    <span class="messages"></span> </div>
  <label class="col-sm-2 col-form-label" for="input3">label3</label>
  <div class="col-sm-4">
    <input type="text" class="form-control" size="10" name="input3"/>
    <span class="messages"></span> </div>
</div>

Answer 1

将表格嵌入两个50％宽（col-6）网格列中......

https://www.codeply.com/go/GJXkHUC1At

 <div class="row">
        <div class="col-md-6">
            <div class="form-group row">
                <label class="col-sm-4 col-form-label" for="input1">label1</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" size="50" name="input1" value="">
                    <span class="messages"></span> </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-4 col-form-label" for="input2">label2</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" size="10" name="input2" value="">
                    <span class="messages"></span> </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-4 col-form-label" for="input3">label3</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" size="10" name="input3">
                    <span class="messages"></span> </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group row">
                <label class="col-sm-4 col-form-label" for="ausbildung">option label</label>
                <div class="col-sm-8">
                    <select class="form-control" id="Select1" name="ausbildung" multiple="" size="5">
                        <option value="3">option 1</option>
                        <option value="8">option 2</option>
                        <option value="9">option 3</option>
                        <option value="10">option 4</option>
                        <option value="11">option 5</option>
                        <option value="12">option 6</option>
                        <option value="17">option 7</option>
                        <option value="19">option 8</option>
                        <option value="27">option 9</option>
                    </select>
                    <span class="messages"></span>
                </div>
            </div>
        </div>
    </div>

Answer 2

我宁愿使用Daemonite for Bootstrap 4并使用浮动标签进行高级表单：https://daemonite.github.io/material/docs/4.0/material/text-fields/