Question

Bootstrap文档包含代码作为navbar example：

的一部分

SqlCommand sqlComm = new SqlCommand();
sqlComm = myConnection.CreateCommand();
sqlComm.CommandText = @"UPDATE [MRT_MKT_BIDW].[biw].[CNX_TPA_Applied_F] 
                        SET TPA_Approver_Code='"+Approver_Code+"',
                        TPA_Approved_Date ='2015-05-06 16:24:47.870',
                        TPA_Approved_Flag='Y' WHERE 
                        MDM_Invoice_Date_Dim_Key='20150206'";

此<form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>课程div的目的是什么？该名称表明它用于分组表单元素，但只有一个子元素。

Answer 1

最基本的是，它在元素之间设置了一些间距。这是来自Bootstrap CSS文件：

.form-group {
  margin-bottom: 15px;
}

如果你挖掘他们的CSS，它会做得更多。与.row中的.form-horizontal行为相同，例如：

.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
}

对于示例中的导航栏，这是在他们的CSS中：

@media (min-width: 768px) {
    .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;            
        vertical-align: middle;
     }
}

@media (max-width: 767px) {
    .navbar-form .form-group {
        margin-bottom: 5px;
    }
    .navbar-form .form-group:last-child {
        margin-bottom: 0;
    }
}

查看Bootstrap here

的完整CSS文件

Bootstrap中单个元素表单组的目的是什么？

1 个答案: