Question

需求是下拉列表中的水平表单组。当用户单击下拉列表时，他们可以在显示的文本字段中输入文本。

在下拉列表中，我无法控制表单组的宽度和边距。例如，以下表单组呈现正常：

<form class="form-horizontal">
    <div class="form-group">
        <label for="strike-from" class="col-sm-2 control-label">From</label>
        <div class="col-xs-1">
            <input type="text" class="form-control" id="strike-from" value="">
        </div>
    </div>
    <div class="form-group">
        <label for="strike-to" class="col-sm-2 control-label">To</label>
        <div class="col-xs-1">
            <input type="text" class="form-control" id="strike-to" value=""">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Apply</button>
        </div>
    </div>
</form>

但是，当在下拉包装器中嵌入相同的HTML时，文本字段会扩展到容器之外并且边距会被压缩。

<div class="form-inline">
<div class="form-group">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true">
            Strikes
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="strikes">
            <li>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="strike-from" class="col-sm-2 control-label">From</label>
                        <div class="col-xs-1">
                            <input type="text" class="form-control" id="strike-from" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="strike-to" class="col-sm-2 control-label">To</label>
                        <div class="col-xs-1">
                            <input type="text" class="form-control" id="strike-to" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Apply</button>
                        </div>
                    </div>
                </form>
            </li>
        </ul>
    </div>
</div>
</div>

是否有开箱即用的实施方案？否则，我只需要为文本框宽度和边距添加自定义样式吗？

或者我只是错误地实施了什么？

Answer 1

我编辑了一些column widths并删除了一个额外的"，并添加了一个类donotchange来删除对齐错误。

这是我的代码

<强> HTML

<div class="form-inline">
  <div class="form-group">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"> Strikes <span class="caret"></span> </button>
      <ul class="dropdown-menu" aria-labelledby="strikes">
        <li style="width: 280px;">
          <form class="form-horizontal" style="display:block;">
            <div class="form-group donotchange">
              <label for="strike-from" class="col-sm-2 control-label">From</label>
              <div class="col-xs-8">
                <input type="text" class="form-control" id="strike-from" value="">
              </div>
            </div>
            <div class="form-group donotchange">
              <label for="strike-to" class="col-sm-2 control-label">To</label>
              <div class="col-xs-8">
                <input type="text" class="form-control" id="strike-to" value="">
              </div>
            </div>
            <div class="form-group donotchange">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Apply</button>
              </div>
            </div>
          </form>
        </li>
      </ul>
    </div>
  </div>

<!-- No need. For checking Only-->
  <div class="form-group">
    <button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"> Sample Button </button>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" id="strike-to" value="">
  </div>
<!-- No need. For checking Only-->

</div>

<强> CSS

@media (min-width: 768px){
.form-inline .donotchange {
     display: block; 
     margin-bottom: 10px; 
     vertical-align: middle; 
}
.form-horizontal .donotchange {
     margin-right: 0px; 
     margin-left: 0px; 
}}
@media (min-width: 768px){
.form-inline .donotchange {
    display: block; 
     margin-bottom: 10px; 
     vertical-align: middle; 
}}

在此处查看我的工作代码http://www.bootply.com/N0lccYSCsg

检查它是否符合您的要求。美好的一天！

Bootstrap 3：下拉列表中的水平表单组

1 个答案: