html - 带有插件的Bootstrap输入文本未对齐

我对如何使输入文本在选项卡上对齐感到有些困惑，请参见下面的图片，以实现更好的可视化效果。
http://i59.tinypic.com/2nrlyd1.png
这是代码：

的HTML

<div class="row">
                            <div class="tabbable tabs-left">
                               <ul class="nav nav-tabs">
                                   <li><a href="#a" data-toggle="tab">Public</a></li>
                                   <li><a href="#c" data-toggle="tab">Private</a></li>
                                   <li><a href="#c" data-toggle="tab">Pending</a></li>
                                   <li><a href="#c" data-toggle="tab">Rejected</a></li>
                                   <li>
                                   <li>
                                      <div class="input-group merged">
                                        <input class="form-control" placeholder="Search">
                                        <span class="input-group-addon"><i class="fa fa-arrow-circle-left fa-fw"></i></span>
                                      </div>
                                 </li>
                               </ul>
                            <div class="tab-content">
                             <div class="tab-pane active" id="a">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
                                 Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div>
                             <div class="tab-pane" id="b">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
                                 Aliquam in felis sit amet augue.</div>
                             <div class="tab-pane" id="c">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
                                 Quisque mauris augue, molestie tincidunt condimentum vitae. </div>
                            </div>
                           </div> <!-- /tabs -->
                        </div><!--row -->

这是为带有插件的输入文本提供的C​​SS

.input-group-addon {background-color: #fff;}
.merged input:first-child{border-right: 0px;}
.merged .input-group-addon + input{border-left: 0px;}

最佳答案

要解决此问题，请将输入文本放入另一个div或类似的东西，然后为该div设置一个最大大小，然后将输入文本作为子元素放入其中，只要您喜欢最大宽度：100％，最大高度：100％，依此类推。

例：

<div class="parent">
   <div class="child">
      <input //code goes here>
   </div>
</div>

.parent {
   width: 100px;
   height: 50px;
}

.child {
   max-width: 100%;
   max-height: 100%;
}

input {
   display: block;
   margin: auto;
}

关于html - 带有插件的Bootstrap输入文本未对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31429364/