html - Bootstrap 内联表单不适用于 chrome

Question

我的 Bootstrap form-inline 有问题，它在 Chrome 上无法正常工作(即，按钮位于 Chrome 上的其他字段下方，但它应该是内联的)，请参阅以下链接页面here

表单代码如下:

  <div class="container">

    <form class="form-inline" method="post" action="resultats.php" onsubmit="return submitForm(this);">

      <div class="habon">

        <div>

          <label for="ami" class="checkbox">
            <input type="checkbox" class="form-control" name="origine" value="ami" id="anywhere">
            N'importe où
          </label>
          &emsp;
          <label for="ami" class="checkbox">
            <input type="checkbox" class="form-control" name="origine" value="ami" id="anytime">
            N'importe quand
          </label>

        </div>


        <div>

            <div class="form-group">


              <div>
                <label for="tags">De</label>
                <div>
                  <input type="text" class="form-control input-sm" id="tags" name="tags" placeholder="Paris">
                </div>
              </div>


            </div>

            <div class="form-group">


              <div>
                <label for="tags2">&Agrave;</label>
                <div>
                  <input type="text" class="form-control input-sm" id="tags2" name="tags2" placeholder="Londres">
                </div>
              </div>

            </div>

            <div class="form-group">
              <label for="datepicker1">Départ</label>
              <div>
                <input type="text" class="form-control input-sm" id="datepicker1" name="datepicker1" placeholder="DD MM YYYY">
              </div>
            </div>

            <div class="form-group">
              <label for="datepicker2">Retour</label>
              <div>
                <input type="text" class="form-control input-sm" id="datepicker2" name="datepicker2" placeholder="DD MM YYYY">
              </div>
            </div>


            <div class="form-group"> <!--  Ne sert à rien  ?-->
              <label for="butt"><br></label>
              <div>
                  <button type="submit" id="butt" class="btn btn-default btn-block">Envoyer</button>
              </div>
            </div>

        </div>
      </div>
    </form>

  </div>

这是相应的CSS:

form{
  position: absolute;
  top: 40%;
  left: 20%;
}

body{

    background-image: url("red2.jpg");

}


.habon {
  background-color: rgba(255, 0, 0, 0.1);
  padding-bottom:2%;
  padding-left:2%;
  padding-right:2%;
}

我尝试了另一篇文章的解决方案，即将 CDN 的 URL 链接替换为 // 而不是 https:// 或 http://，但还是一样。

你知道这个问题是从哪里来的吗？

谢谢

Answer 1

这里有一个解决方法，只需在包裹整个表单的 div 中添加一个 flexbox 显示，默认情况下它会将所有内容内联:

<div style ="display:flex">

            <div class="form-group">


              <div>
                <label for="tags">De</label>
                <div>
                  <input type="text" class="form-control input-sm" id="tags" name="tags" placeholder="Paris">
                </div>
              </div>


            </div>

            <div class="form-group">


              <div>
                <label for="tags2">&Agrave;</label>
                <div>
                  <input type="text" class="form-control input-sm" id="tags2" name="tags2" placeholder="Londres">
                </div>
              </div>

            </div>

            <div class="form-group">
              <label for="datepicker1">Départ</label>
              <div>
                <input type="text" class="form-control input-sm" id="datepicker1" name="datepicker1" placeholder="DD MM YYYY">
              </div>
            </div>

            <div class="form-group">
              <label for="datepicker2">Retour</label>
              <div>
                <input type="text" class="form-control input-sm" id="datepicker2" name="datepicker2" placeholder="DD MM YYYY">
              </div>
            </div>


            <div class="form-group"> <!--  Ne sert à rien  ?-->
              <label for="butt"><br></label>
              <div>
                  <button type="submit" id="butt" class="btn btn-default btn-block">Envoyer</button>
              </div>
            </div>

        </div>