Question

我遇到了bootstrap form-inline在Chrome上无法正常运行的问题（即，Button位于Chrome上的其他字段下方，但它应该是内嵌的），请参阅页面链接{{3 }}

以下是表单的代码：

  <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%;
}

我尝试过其他帖子的解决方案，即用// https://或http://的{{1}}内容替换指向CDN的网址链接，但它仍然相同。

你知道这个问题的来源吗？

谢谢

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>

Bootstrap内联表单不适用于chrome

1 个答案: