如何放置与文本内联的输入组？

Question

我正在尝试将我的输入组与文本内联，如下所示：

但是输入组显示在一个块中，我试图通过提供文本 col-8 将所有内容放在一个网格中，但我会尽可能地扩展文本以接近输入-组

这是我的代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div role="tabpanel" id="panel-1" aria-labelledby="panel-1-header" class="collapse show">
  <div class="card-body">
    <div _ngcontent-ken-c136="" class="form-group"> BACON +1,00&nbsp;€
      <div _ngcontent-ken-c136="" class="input-group">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-984">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-985">
        <div _ngcontent-ken-c136=""
          class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-986">+</button></div>
      </div>
    </div>
    <div _ngcontent-ken-c136="" class="form-group"> STELLE FILANTI
      <div _ngcontent-ken-c136="" class="input-group">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-987">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-988">
        <div _ngcontent-ken-c136=""
          class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-989">+</button></div>
      </div>
    </div>
    <div _ngcontent-ken-c136="" class="form-group"> CAPPUCCINO
      <div _ngcontent-ken-c136="" class="input-group">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-990">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-991">
        <div _ngcontent-ken-c136=""
          class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-992">+</button></div>
      </div>
    </div>
    <div _ngcontent-ken-c136="" class="form-group"> CIOCCOLATA IN TAZZA
      <div _ngcontent-ken-c136="" class="input-group">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-993">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-994">
        <div _ngcontent-ken-c136=""
          class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-995">+</button></div>
      </div>
    </div>
    <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><button _ngcontent-ken-c136="" type="button" class="btn btn-sm btn-outline-dark float-right mb-3" control-id="ControlID-996"> Step successivo </button>
    <!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}-->
  </div>
</div>

这里感谢@AwatITWork 的最终解决方案

.btn-circle {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 6px 0px !important;
  border-radius: 15px !important;
  font-size: 8px !important;
  text-align: center !important;
}

.input-group .form-control {
  text-align: center !important;
}

.form-quantity-custom input {
  background: none !important;
  border: 0 !important;
  padding-top: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div role="tabpanel" id="panel-1" aria-labelledby="panel-1-header" class="ng-star-inserted collapse show">
  <div class="card-body">
    <div _ngcontent-off-c136="" class="row row-cols-2 mb-1 align-content-between ng-star-inserted">
      <div _ngcontent-off-c136="" class="col-7" style="margin-right: auto;">BACON +1,00&nbsp;€</div>
      <div _ngcontent-off-c136="" class="col-4">
        <div _ngcontent-off-c136="" class="input-group form-quantity-custom"><button _ngcontent-off-c136="" disabled="" class="btn btn-circle btn-outline-dark" control-id="ControlID-992">-</button><input _ngcontent-off-c136="" type="number" value="1" disabled="" class="form-control" control-id="ControlID-993"><button _ngcontent-off-c136=""
            class="btn btn-circle btn-success" control-id="ControlID-994">+</button></div>
      </div>
    </div>
  </div>
</div>

Answer 1

我了解的不多bootstrap但希望这对你有帮助：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div role="tabpanel" id="panel-1" aria-labelledby="panel-1-header" class="collapse show">
  <div class="card-body">
    <div _ngcontent-ken-c136="" class="form-group row">
      <div class="col"> BACON +1,00&nbsp;€</div>
      <div _ngcontent-ken-c136="" class="input-group col sm">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-984">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-985">
        <div _ngcontent-ken-c136="" class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-986">+</button></div>
      </div>
    </div>
    <div _ngcontent-ken-c136="" class="form-group row">
    <div class="col">STELLE FILANTI</div>
      <div _ngcontent-ken-c136="" class="input-group col">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-987">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-988">
        <div _ngcontent-ken-c136="" class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-989">+</button></div>
      </div>
    </div>
    <div _ngcontent-ken-c136="" class="form-group row">
    <div class="col">CAPPUCCINO</div>
      <div _ngcontent-ken-c136="" class="input-group col">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-990">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-991">
        <div _ngcontent-ken-c136="" class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-992">+</button></div>
      </div>
    </div>
    <div _ngcontent-ken-c136="" class="form-group row">
    <div class="col">CIOCCOLATA IN TAZZA</div>
      <div _ngcontent-ken-c136="" class="input-group col">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-993">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-994">
        <div _ngcontent-ken-c136="" class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-995">+</button></div>
      </div>
    </div>
    <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><button _ngcontent-ken-c136="" type="button" class="btn btn-sm btn-outline-dark float-right mb-3" control-id="ControlID-996"> Step successivo </button>
    <!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}-->
  </div>
</div>

Answer 2

嗯，我的 E-Commerce 网站也有类似的问题，我已经解决了这个问题，我相信你明白了，但让我解释一下我做了什么，每个卡片项目都有这样的东西，它增加或减少，还有一个用于删除当前项目的删除按钮，每个都有一个唯一的id。

希望对你也有帮助：

<div class="row row-cols-2 mb-1 align-content-between">
    <div class="col-7" style="margin-right: auto;">
        <div class="row text-center" style="min-width: 200px;">
            <div style="width: fit-content !important;border: 1px black solid; margin: 0px 20px 0px 20px;padding: 0px; border-radius: 5px;" >
                <span style="float: left; width: 15% !important; border-radius: 5px 0px 0px 5px;" role="button" id="1-qty-dec">-</span>
                <input style="width: 70% !important;" class="w-50 text-center numbersOnly" min="1" value="1" step="1" type="number" name="qty" id="row-1-qty" required>
                <span style="float: right; width: 15% !important; border-radius: 0px 5px 5px 0px;" role="button" id="1-qty-inc">+</span>
            </div>
        </div>
    </div>
    <div class="col-4">
        <span class="btn btn-danger" role="button"  style="float: right;padding-top: 0.1em;padding-bottom: 0.1em;">Delete</span>
    </div>
</div>

我会把它放在你当前的模板中，所以你可以在这里看到它

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack19</title>
</head>
<body>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div role="tabpanel" id="panel-1" aria-labelledby="panel-1-header" class="collapse show">
    <div class="card-body">
        <div _ngcontent-ken-c136="" class="form-group"> BACON +1,00&nbsp;€
            <div _ngcontent-ken-c136="" class="input-group">
                <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-984">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-985">
                <div _ngcontent-ken-c136=""
                     class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-986">+</button></div>
            </div>
        </div>
        <div _ngcontent-ken-c136="" class="form-group"> STELLE FILANTI
            <div _ngcontent-ken-c136="" class="input-group">
                <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-987">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-988">
                <div _ngcontent-ken-c136=""
                     class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-989">+</button></div>
            </div>
        </div>
        <div _ngcontent-ken-c136="" class="form-group"> CAPPUCCINO
            <div _ngcontent-ken-c136="" class="input-group">
                <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-990">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-991">
                <div _ngcontent-ken-c136=""
                     class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-992">+</button></div>
            </div>
        </div>
        <div _ngcontent-ken-c136="" class="form-group"> CIOCCOLATA IN TAZZA
            <div _ngcontent-ken-c136="" class="input-group">
                <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-993">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-994">
                <div _ngcontent-ken-c136=""
                     class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-995">+</button></div>
            </div>
        </div>

<!--        Try doing this... Start-->
        <div class="row row-cols-2 mb-1 align-content-between">
            <div class="col-7" style="margin-right: auto;">
                <div class="row text-center" style="min-width: 200px;">
                    <div style="width: fit-content !important;border: 1px black solid; margin: 0px 20px 0px 20px;padding: 0px; border-radius: 5px;" >
                        <span style="float: left; width: 15% !important; border-radius: 5px 0px 0px 5px;" role="button" id="1-qty-dec">-</span>
                        <input style="width: 70% !important;" class="w-50 text-center numbersOnly" min="1" value="1" step="1" type="number" name="qty" id="row-1-qty" required>
                        <span style="float: right; width: 15% !important; border-radius: 0px 5px 5px 0px;" role="button" id="1-qty-inc">+</span>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <span class="btn btn-danger" role="button"  style="float: right;padding-top: 0.1em;padding-bottom: 0.1em;">Delete</span>
            </div>
        </div>
        <!--        Try doing this... END-->
        
        
        <!--bindings={
      "ng-reflect-ng-for-of": "[object Object],[object Object"
    }--><button _ngcontent-ken-c136="" type="button" class="btn btn-sm btn-outline-dark float-right mb-3" control-id="ControlID-996"> Step successivo </button>
        <!--bindings={
      "ng-reflect-ng-template-outlet": "[object Object]"
    }-->
    </div>
</div>

</body>
</html>

如何放置与文本内联的输入组？

How to place a input-group inline with the text?

html

css

bootstrap-4