Question

我试图在一个div内停止/打破form-inline课程我有三个输入字段我喜欢左边的两个第一个，彼此在上面而第三个就是它们的严谨性。

这是一个非常大的表单，所以我不想从父表单中删除form-inline。

HTML

<form class="form-inline well col-md-10">
  <!-- Produkt input-->
  <div class="input-group col-md-4 form">
    <div class="input-group-addon"><i class="glyphicon glyphicon-wrench"></i></div>
      <input id="produkt" name="produkt" type="text" placeholder="Produkt" class="form-control input-sm">
      <br>
      <div class="input-group-addon"><i class="glyphicon glyphicon-transfer"></i></div>
      <input id="objekt_lev_dat" name="objekt_lev_dat" type="text" placeholder="Leverans datum" class="form-control input-sm" required>
    </div>
    <!-- Adress Textarea -->
    <div class="input-group col-md-4">
      <div class="input-group-addon"><i class="fa fa-truck"></i></div>
      <textarea class="form-control" id="objekt_mont_adress" name="objekt_mont_adress" rows="3" placeholder="Adress" required>    </textarea>
    </div>
</form>

Answer 1

请尝试以下操作：https://jsfiddle.net/rjc5s1vn/3/

我将您的inputs和字形配对包装成两个包裹<div class="test">：

<form class="form-inline well col-md-10">
  <!-- Produkt input-->
  <div class="input-group col-md-4 form">
    <div class="test">
      <div class="input-group-addon"><i class="glyphicon glyphicon-wrench"></i></div>
      <input id="produkt" name="produkt" type="text" placeholder="Produkt" class="form-control input-sm">
    </div>
  <br>
    <div class="test">
      <div class="input-group-addon"><i class="glyphicon glyphicon-transfer"></i></div>
      <input id="objekt_lev_dat" name="objekt_lev_dat" type="text" placeholder="Leverans datum" class="form-control input-sm" required>
    </div>
  </div>
  <!-- Adress Textarea -->
  <div class="input-group col-md-4">
    <div class="input-group-addon"><i class="fa fa-truck"></i></div>
    <textarea class="form-control" id="objekt_mont_adress" name="objekt_mont_adress" rows="3" placeholder="Adress" required></textarea>
  </div>
</form>

CSS：

.form-inline > .input-group:first-child > .test {
  display: block;
}
.form-inline > .input-group:first-child > .test div, .form-inline > .input-group:first-child > .test input  {
  display: inline-block;
  float: left;
}

Answer 2

我解决了这个问题：<br>

注意更多嵌套<div><br>

<!-- Product input-->
    <div class="col-md-4" style="padding-left: 0px">
        <div class="input-group input-group-sm col-md-12">
            <div class="input-group-addon"><i class="glyphicon glyphicon-wrench"></i></div>
            <input id="produkt" name="produkt" type="text" placeholder="Produkt" class="form-control">
        </div>
        <br>
        <div class="input-group input-group-sm col-md-12">
            <div class="input-group-addon"><i class="glyphicon glyphicon-transfer"></i></div>
            <input id="objekt_lev_dat" name="objekt_lev_dat" type="text" placeholder="Leverans datum" class="form-control" required>
        </div>
    </div>

Answer 3

我有一个解决方案。你可以这样试试。我刚刚使用了核心引导程序和一些CSS。看看我的demo

<Files ajax_file.php>
    <IfModule !mod_authz_core.c>
        Order allow,deny
        Allow from all
    </IfModule>
    <IfModule mod_authz_core.c>
        Require all granted
    </IfModule>
</Files>

Answer 4

试试这个

    <form class="form-inline">

    <div class="input-group col-md-4 form">
    <div class="input-group-addon"><i class="glyphicon glyphicon-wrench"></i></div>
    <input id="produkt" name="produkt" type="text" placeholder="Produkt" class="form-control input-sm">
    <br></div>

  <div class="input-group col-md-4 form">
    <div class="input-group-addon"><i class="glyphicon glyphicon-transfer"></i></div>
    <input id="objekt_lev_dat" name="objekt_lev_dat" type="text" placeholder="Leverans datum" class="form-control input-sm" required>
  </div>

  <div class="input-group col-md-4">
    <div class="input-group-addon"><i class="fa fa-truck"></i></div>
    <textarea class="form-control" id="objekt_mont_adress" name="objekt_mont_adress" rows="3" placeholder="Adress" required></textarea>
  </div>
</form>

请参阅Demo

Bootstrap类“form-inline”在div内部中断

4 个答案: