为什么将输入的前缀或文本推入Bootstrap表单的下一行？

问题描述

由于列的大小是相对的，因此我认为它将使所有内容适合一行，尤其是在前置的情况下。我将包括HTML的相关部分，以及适用的自定义CSS样式。我试图将输入显示更改为内联，但无济于事。不知道是什么原因引起的，我对Bootstrap不太熟悉。

HTML

            <div class="products">
              <div class="form-group row">
                <label for="rioVerde" style="border: 1px white solid" class="col-sm-6 col-form-label">Rio Verde Hot Sauce</label>
                <div class="col-sm-6" style="border: 1px white solid">
                  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">$8</span>
  </div>
                  <input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde">
                </div>
              </div>
              <div class="form-group row">
                <label for="rioVerde" class="col-sm-6 col-form-label">Diablo Rojo Hot Sauce</label>
                <div class="col-sm-6">
                  <input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde">
                  x $8.00
                </div>
              </div>
              <div class="form-group row">
                <label for="rioVerde" class="col-sm-6 col-form-label">Mango Bolero Hot Sauce</label>
                <div class="col-sm-6">
                  <input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde">
                  x $8.00
                </div>
              </div>
              <div class="form-group row">
                <label for="rioVerde" class="col-sm-6 col-form-label">"Hot Like Me" Hot Sauce</label>
                <div class="col-sm-6">
                  <input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde">
                  x $8.00
                </div>
              </div>
              <div class="form-group row">
                <label for="rioVerde" class="col-sm-6 col-form-label">Pickled Red Cabbage</label>
                <div class="col-sm-6">
                  <input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde">
                  x $6.00
                </div>
              </div>
            </div>

... CSS：

html,body {
    height: 100%;
    color: white;
}

body{
    background: rgb(252,230,214);
    background: linear-gradient(41deg,rgba(252,214,1) 0%,rgba(214,247,1) 100%);
    background-image: url("/images/bg1.jpg");
    background-position: fixed;
    background-repeat: none;
    background-size: cover;
}

#form {
    max-width: 800px;
    height: auto;
    margin: 20px auto;
}

.container-fluid{
    margin: 20px auto;
}

.display-3{
    color: white;
    margin: 10px auto 0px;
    text-align: center;
}

.card{
    background-color: rgba(55,55,0.5);
    backdrop-filter: blur(10px);
}

label{
  font-weight: bold;
  text-decoration: underline;
}

.products{
  margin: 50px 0;
}

input{
  display: inline;
}

解决方法

您的row设置为使用display: flex，但这仅适用于它的直接子代。您的输入，前缀和文本位于另一个div中（类为col-sm-6），因此会将flex属性应用于它们。

您可以将flex属性添加到输入的父项（即col-sm-6 div）以使其工作如下：

.form-group > div {
  display: flex;
  flex-wrap: wrap;
}

这将选择form-group的{​​{1}}的直接子级，但是您可以在输入容器中添加一个类以使其更容易（并且不太容易拾取错误的元素）

然后，您需要在输入及其前缀和文本之间添加所需的空格，例如：

div

工作示例：

.products .form-group input {
  display: inline-block; 
  /* add space after the input to separate it from the text */
  margin-right: 5px; 
}

.products .form-group div {
  display: flex;
  flex-wrap: wrap;
}

.products .form-group input {
  display: inline-block; 
  /* add space after the input to separate it from the text */
  margin-right: 5px; 
}