Question

我在表单上使用了bootstrap。我根据bootstrap提供的网格选项打破了结构。我使用的就像col-md-2 | col-md-6 | col-md-4（参见下图）

在col-md-6中，有一条有3行的文本区域。我期待的是打破具有col-md-4的最后一个div，我可以将它分成2列和3行。如图所示。

当前HTML

<div class="row">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <p class="pHeader">
            Comments :
        </p>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <textarea id="txtComments" rows="3" cols="12" class="form-control" runat="server" />
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <div>
        </div>
    </div>
</div>

Answer 1

检查这个...在最后一栏我设计了2行，每行3列

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.form-control{
margin-bottom:10px;
}
</style>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <p class="pHeader">
            Comments :
        </p>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <textarea id="txtComments" rows="3" cols="12" class="form-control" runat="server"></textarea>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <div class="row" >
               <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">Name</div>
               <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><input type="text" class="form-control"></div>
        </div>
 <div class="row">
               <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">Age</div>
               <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><input type="text" class="form-control"></div>
        </div>
 <div class="row">
               <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">Date</div>
               <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><input type="text" class="form-control"></div>
        </div>
    </div>
  </div>
</div>
    
</body>
</html>

＆＃13;

Answer 2

您可以像下面那样划分引导网格

以下代码可以帮助您..

.inner-div {
  border: 1px solid blue !important;
  margin: 5px;
  padding: 10px;
}

<div class="row">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <p class="pHeader">
            Comments :
        </p>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <textarea id="txtComments" rows="3" cols="12" class="form-control" runat="server" ></textarea>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <div class="inner-div col-sm-12">
          Date: <input type="text" name="date" value="">
        </div>
        <div class="inner-div col-sm-12">
          Time: <input type="text" name="time" value="">
        </div>
    </div>
</div>

如何在引导程序中将网格div分解为子级别

2 个答案: