Question

我在<div>内使用Bootstrap 3“form-inline”。不知何故，div被“折叠”在形式内联中。

这是我的代码：

HTML

<div class="wrapper"> 
        <div class="form-inline">    
            <div class="row"> 
                <label>Name:</label>   
                <div class="form-group inner-addon right-addon  pull-right">
                    <i style="font-size: 10px; padding: 8px 6px;" class="glyphicon glyphicon-search"></i>
                        <input class="form-control input-sm" data-bind="textInput: nameFilter, stopBubble:true" placeholder="<name>" type="text">
                </div>
            </div>
        </div>
        <div class="form-inline">    
            <div class="row"> 
                <label>Name2:</label>   
                <div class="form-group inner-addon right-addon pull-right">
                    <i style="font-size: 10px; padding: 8px 6px;" class="glyphicon glyphicon-search"></i>
                        <input class="form-control input-sm" data-bind="textInput: nameFilter, stopBubble:true" placeholder="<name>" type="text">
                </div>
            </div>
        </div>
    </div>

CSS

.wrapper{
    float: left;
}
.inner-addon { 
    position: relative; 
    margin-bottom: 0px !important;
}

/* style icon */
.inner-addon .glyphicon{
  position: absolute;
  padding: 10px;
  pointer-events: none;
}
.right-addon .glyphicon{ 
    right: 0px;
}

我哪里出错了？

Bootply fiddle

我已经添加了更多行和一个右拉，以显示我想要的内容。抱歉原来的问题缺乏。

Answer 1

对于Bootstrap，你不应该在表单内联中放置一行，只需删除它和一些小的更改，这现在可以完美。

请参阅Example Here

<div class="wrapper"> 
    <div class="form-inline">    
        <label>Mame:</label>   
        <div class="form-group inner-addon right-addon">
           <i style="font-size: 10px; padding: 8px 6px;" class="glyphicon glyphicon-search"></i>
           <input class="form-control input-sm" data-bind="textInput: nameFilter, stopBubble:true" placeholder="<name>" type="text">
        </div>
    </div>
</div>

所有Bootstrap属性的示例都可以在website找到，这非常有用

Answer 2

使用此：

<div class="container">
  <form class="form-inline" role="form">

    <div class="form-inline">
      <div class="row">
        <label>Name:</label>
        <div class="form-group inner-addon right-addon">
          <i style="font-size: 10px; padding: 8px 6px;" class="glyphicon glyphicon-search"></i>
          <input class="form-control input-sm" data-bind="textInput: nameFilter, stopBubble:true" placeholder="<name>" type="text">
        </div>
      </div>

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

小提琴here

如何在bootstrap form-inline周围对齐div

2 个答案: