Question

我正在尝试使用bootstrap 3和typeahead功能构建一个简单的内联表单。我有两个问题，我不确定他们是否有某种关系。问题如下：

- 我遇到的第一个问题是#orig和#dest字段（第一和第二个输入字段）的大小不能自动适应100％的网格容器父级。就好像它们的尺寸不会超过200px。见图像：form。我真的不明白是什么导致这种情况，因为我的样式表文件中没有提到200px或任何其他限制设置。

- 我的第二个问题也与上述相同的表单字段有关，但现在的问题是，当我尝试调整窗口大小时，字段的ghost背景仍保持相同的200px大小并使表单看起来非常笨拙堆叠在一起。见图像：form。我很确定这个问题与typeahead有关，因为当我没有包含我的javascript文件的链接（包含typeahead功能）时，这个问题不再发生了。

见下面的代码：

<div class="jumbotron text-center" id="main">
  <div class="container-fluid">
    <div class="row">
      <div class="cl-md-12" id="box">
        <div class="well well-lg" id="well-form">
          <form role="form" class="form-inline" > 
            <div class="container">
              <div class="row">
                <div class="col-sm-3" id="field1">
                  <div class="form-group">
                    <label class="sr-only" for="orig">Origin city or airport</label>
                    <input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
                  </div>
                </div>
                <div class="col-sm-1" id="field2">
                   <a href="#"><span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span></a>
                </div>
                <div class="col-sm-3" id="field3">
                  <div class="form-group">
                    <label class="sr-only" for="dest">Destination city or airport</label>
                    <input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
                  </div>
                </div>
                <div class="col-sm-2" id="field4">
                  <div class="form-group">
                    <label class="sr-only" for="date_out">Date out</label>
                    <input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
                  </div>
                </div>
                <div class="col-sm-2" id="field5">
                  <div class="form-group">
                    <label class="sr-only" for="date_in">Date in</label>
                    <input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
                  </div>
                </div>
                <div class="col-sm-1" id="field6">
                  <button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.jumbotron {
    color: #ffffff;
    padding: 80px 25px 200px;
    margin-top: 0px;
}
.form-inline > * {
    display: inline-block;
    justify-content: center;
}
#date_out, #date_in{
    background-color: #ffffff !important;
    width:100%;
}
#orig, #dest {
    background-color: #ffffff !important;
    max-width: 400px;
    width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
    padding: 1px;
    margin: 0;
}

非常感谢任何帮助：）

提前致谢

Answer 1

当我使用最新版本在bootstrap 3中运行代码时。它工作正常。请查看以下代码段:(参见完整页面预览）

＆＃13;

.jumbotron {
    color: #ffffff;
    padding: 80px 25px 200px;
    margin-top: 0px;
}
.form-inline > * {
    display: inline-block;
    justify-content: center;
}
#date_out, #date_in{
    background-color: #ffffff !important;
    width:100%;
}
#orig, #dest {
    background-color: #ffffff !important;
    max-width: 400px;
    width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
    padding: 1px;
    margin: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="jumbotron text-center" id="main">
  <div class="container-fluid">
    <div class="row">
      <div class="cl-md-12" id="box">
        <div class="well well-lg" id="well-form">
          <form role="form" class="form-inline" > 
            <div class="container">
              <div class="row">
                <div class="col-sm-3" id="field1">
                  <div class="form-group">
                    <label class="sr-only" for="orig">Origin city or airport</label>
                    <input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
                  </div>
                </div>
                <div class="col-sm-1" id="field2">
                   <a href="#"><span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span></a>
                </div>
                <div class="col-sm-3" id="field3">
                  <div class="form-group">
                    <label class="sr-only" for="dest">Destination city or airport</label>
                    <input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
                  </div>
                </div>
                <div class="col-sm-2" id="field4">
                  <div class="form-group">
                    <label class="sr-only" for="date_out">Date out</label>
                    <input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
                  </div>
                </div>
                <div class="col-sm-2" id="field5">
                  <div class="form-group">
                    <label class="sr-only" for="date_in">Date in</label>
                    <input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
                  </div>
                </div>
                <div class="col-sm-1" id="field6">
                  <button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

使用twitter typeahead和bootstrap3的表单问题

1 个答案: