在线输入字段答案

【问题标题】：Input fileds in oneline在线输入字段
【发布时间】：2013-10-07 15:02:14
【问题描述】：

有人可以帮我在同一行上有两个输入字段和一个提交按钮吗？我在 jsfiddle 中创建了示例。谢谢。

    <div class="row">
       <div class="col-lg-4 col-lg-offset-4">
            <div class="form-group">
                <input name="Test1" type="text" class="form-control" id="test1" >
                <input name="Test2" type="text" class="form-control" id="test2" >
                <button name="TestSubmit" type="submit" class="btn btn-primary" >Submit</button>                    
            </div>         
     </div> <!-- col-lg-4 col close -->
    </div> <!-- row close -->

【问题讨论】：

标签： twitter-bootstrap formfield

【解决方案1】：

http://jsfiddle.net/Mndgw/1/ 一般来说：为了将多个 div 放在一行中，它们都应该有一个容器，其中包含 display: inline-block 和一个数字宽度（px\percent）宽度，并且每个都应该具有 css 属性 display:内联块，以及数字宽度（px\precent）嗨，我已经更新了你的代码，请查看小提琴

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.myField{
    width:39%;
    display:inline-block;

}
.mySubmit{
    width:19%;
    display: inline block;
}
.myContainer{
    width: 70%;
    margin: auto;
    text-align: center;
}

    <div class="row">
       <div class="col-lg-4 col-lg-offset-4">
            <div class="form-group myContainer">
                <input name="Test1" type="text" class="form-control myField" id="test1" >
                <input name="Test2" type="text" class="form-control myField" id="test2" >
                <button name="TestSubmit" type="submit" class="btn btn-primary mySubmit" >Submit</button>                   
            </div>         
     </div> <!-- col-lg-4 col close -->
    </div> <!-- row close -->

【讨论】：

谢谢！。代替显式添加更多样式，我们使用引导程序预定义的 CSS。以我的表格为例，稍后如果我添加另一个文本字段和标签，它们看起来不对齐。 jsfiddle.net/Mndgw/2.
Bootstrap 没有用于 block \ inline-block display css 属性的类，但您可以创建一个类并将其与引导类一起使用。