html - 增加内联表单输入的宽度？

Question

           <form class="form-inline">
               <div class="form-group">
                   <label class="sr-only"></label>
                   <input class="form-control" type="text"/>
               </div>
               <div class="form-group">
                   <label class="sr-only"></label>
                   <input class="form-control hello" type="text"/>
               </div>
               <div class="form-group">
                   <label class="sr-only"></label>
                   <input class="form-control" type="text"/>
               </div>
               <input type="submit" class="btn" value="submit"/>
           </form>

如何使中间输入的宽度为 500 像素？我尝试用 col-xs-10 将它包装成一行，但这也没有用。这是一个 jsfiddle demo.

Answer 1

下面的 CSS 规则可以工作:

.form-inline .form-control.hello {
    display: inline-block;
    width:500px;
}

JS fiddle : http://jsfiddle.net/uvdU8/3/