并排放置表格答案

【问题标题】：Put form side by side并排放置表格
【发布时间】：2017-01-01 09:31:58
【问题描述】：

我是前端开发的新手，现在我试图将以下表单并排放置，而不是单独显示。这是我的代码：

        $templateCache.put('myProfile.html', 
            '<div ng-cloak>'+
            '<div class="modal-header">'+
                '<h3 class="modal-title">My Profile</h3>'+
            '</div>'+
            '<div class="modal-body">'+
            '<div class="form-group">'+
                '<label>Title</label>'+
                '<input type="text" id="first_name" name="first_name" class="form-control" required/>'+
            '</div>'+
            '<div class="form-group">'+
                '<label>First Name</label>'+
                '<input type="text" id="first_name" name="first_name" class="form-control" required/>'+
            '</div>'+
            '<div class="form-group">'+
                '<label>Last Name</label>'+
                '<input type="text" id="last_name" name="last_anme" class="form-control" required/>'+
            '</div>'+
            '<div class="form-group">'+
                '<label>Test</label>'+
                '<input type="text" id="address" name="address" class="form-control" required/>'+
            '</div>'+
            '<div class="form-group">'+
            '<label>Other</label>'+
            '<input type="text" id="other" name="other" class="form-control" required/>'+
        '</div>'+
            '<div class="form-group">'+
                '<label>Date Format</label>'+
                '<select class="form-control-filter" ng-init="tempDateFormat = dateFormat"'+
                    ' ng-model=\"tempDateFormat\" style="width:100%;">'+
                    '<option value="DD/MM/YYYY">DD/MM/YYYY</option>'+
                    '<option value="MM/DD/YYYY">MM/DD/YYYY</option>'+
                    '<option value="DD-MM-YYYY">DD-MM-YYYY</option>'+
                    '<option value="MM-DD-YYYY">MM-DD-YYYY</option>'+
                '</select>'+
            '</div>'+
            '<div class="modal-footer" style="padding:5px;">'+
                '<button class="btn btn-primary" type="button" style="height:30px; padding:4px 12px;" '+
                'ng-click="$close(tempDateFormat)">Save</button>'+
                '<button class="btn btn-primary" type="button" style="height:30px; padding:4px 12px;" '+
                'ng-click="$close(tempDateFormat)">Cancel</button>'+
            '</div>'+
            '</div>'
    );

输出如下所示：

但是，我希望这个窗口可以展开，first name 和last name 应该并排显示。我在这个网站上做了一些研究，但似乎不适用于我的情况。

提前致谢。

【问题讨论】：

这是一个公平的问题，但至少可以快速浏览一下文档：getbootstrap.com/css/#grid-example-basic
如果您使用引导程序，您也可以使用 col-*-6 进行布局。
@Chris 文档真的很有帮助，我什至不知道这个项目正在使用 Bootstrap，所以我不知道从哪里开始。非常感谢！
@SatejS 是的，我也将它包含在我的代码中。谢谢！

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

将名字和姓氏html放在同一个表单组中，并赋予它form-inline的类。像这样：

<div class="form-group form-inline">
  <label>First Name</label>
  <input type="text" id="first_name" name="first_name" class="form-control" required/>
  <label>Last Name</label>
  <input type="text" id="last_name" name="last_name" class="form-control" required/>
</div>

如果您希望它们在移动宽度上并排，您将不得不覆盖一些 css，只需添加：

.form-inline .form-control{
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

如果你在移动设备宽度上这样做，你可能需要做一些自定义 css 以使它们看起来正确，因为我认为它们在小屏幕上并排看起来有点傻

【讨论】：

提供的css真的很有帮助。