Wie man ein Grid div auf untergeordnete Ebene in Bootstrap

brechen Ich habe Bootstrap auf einem Formular verwenden. Ich breche die Struktur gemäß den Rasteroptionen, die von Bootstrap bereitgestellt werden. Ich habe verwendet wie col-md-2 | col-md-6 | col-md-4 (siehe Bild unten)Wie man ein Grid div auf untergeordnete Ebene in Bootstrap

In col-md-6 gibt es eine Textarea mit 3 Zeilen. Was ich erwarte ist, letzte div zu brechen, die col-md-4 haben, und ich kann es zu 2 Spalten und 3 Reihen brechen. wie im Bild angezeigt.

Aktuelle 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>

Quelle

2016-07-21 Gaurravs

prüfen dies ... in letzten Spalte entworfen i 2 Reihen mit 3 Spalten jeweils

<!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>

Quelle

2016-07-21 07:25:05

Dank für die Hilfe danken .. – Gaurravs

Sie können wie die Bootstrap-Gitter teilen unter

Der folgende Code wird Ihnen helfen ..

.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>

Quelle

2016-07-21 07:28:23

danke für die Hilfe – Gaurravs

Wie man ein Grid div auf untergeordnete Ebene in Bootstrap

Antwort

Verwandte Themen