Бутстрап выравнивания сетки не отображаются должным образом

Я написал код начальной загрузки следующим образом -Бутстрап выравнивания сетки не отображаются должным образом

.panel-heading { 
 
    border-bottom-left-radius: 3px; 
 
    border-bottom-right-radius: 3px; 
 
    border-top-left-radius: 3px; 
 
    border-top-right-radius: 3px; 
 
} 
 
a, a:hover, a:visited, a:active { 
 
    text-decoration: none !important; 
 
    color: white !important; 
 
} 
 

 
span.dpi1 { 
 
    color: crimson; 
 
} 
 

 
span.dpi2 { 
 
    color: red; 
 
} 
 
table,td,tr{ 
 
    border-top-color: 
 
}

<div> 
 
    <div> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-body" style="margin-left: 10px;"> 
 

 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
      <label>Enter <span class="dpi1">*</span></label> 
 
      <input id="searchText" type="text" size="50" autofocus="autofocus" /> 
 
      <button id="searchButton" type="button" class="btn btn-primary" >Search</button> 
 
      </div> 
 
      <div class="pull-right"> 
 
      <label><span class="dpi2">* Mandatory</span></label> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <br /> 
 

 
    <div> 
 
     <div class="row pull-right"> 
 
     <button type="button" class="btn btn-primary" id="expand"><span class="glyphicon glyphicon-arrow-down">Expand All</span></button> 
 
     <button type="button" class="btn btn-primary" id="collapse"><span class="glyphicon glyphicon-arrow-up">Collapse All</span></button> 
 
     </div> 
 
     <br /> 
 
     <br /> 
 
     <div class="row"> 
 
     <div class="panel-group accord" id="showAgain"> 
 
      <div class="panel panel-primary"> 
 
      <div class="panel-heading"><a data-toggle="collapse" href="#collapseA"><span style="color: white">Summary</span></a></div> 
 
      <div id="collapseA" class="panel-collapse collapse in"> 
 
       <div class="panel-body" style="white-space: nowrap; overflow-y: scroll;"> 
 
       <div class="col-md-4"> 
 
        <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
        </table> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4"> 
 
        <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
        </table> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4"> 
 
        <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
        </table> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <br /> 
 
     <div class="row"> 
 
     <div class="col-md-4"> 
 
      <div class="panel-group accord"> 
 
      <div class="panel panel-primary"> 
 
       <div class="panel-heading"><a data-toggle="collapse" href="#collapseB"><span style="color: white">Information</span></a></div> 
 
       <div id="collapseB" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
         <thead> 
 
         <tr> 
 
          <th></th> 
 
          <th>xx</th> 
 
          <th>xxx</th> 
 
          <th>xxx</th> 
 
         </tr> 
 
         </thead> 
 
         <tr> 
 
         <td><b>Customer No</b></td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <td><b>First Name</b></td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <td><b>Last Name</b></td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <td><b>Address</b></td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <td><b>Contact No.</b></td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <td><b>Email</b></td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
        </table> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-8"> 
 
      <div class="panel-group accord"> 
 
      <div class="panel panel-primary"> 
 
       <div class="panel-heading"><a data-toggle="collapse" href="#collapseC"><span style="color: white">Information</span></a></div> 
 
       <div id="collapseC" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
         <thead> 
 
         <tr> 
 
          <th>XXXXXXX</th> 
 
          <th>XXXXXXX</th> 
 
          <th>XXXXXXX</th> 
 
         </tr> 
 
         </thead> 
 
         <tr> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
        </table> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="row"> 
 
     <div class="panel-group accord"> 
 
      <div class="panel panel-primary"> 
 
      <div class="panel-heading"><a data-toggle="collapse" href="#collapse1"><span style="color: white">Information</span></a></div> 
 
      <div id="collapse1" class="panel-collapse collapse"> 
 
       <div class="panel-body" style="overflow: scroll; white-space: nowrap; overflow-y: scroll;"> 
 
       <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
        <thead> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         </tr> 
 
        </thead> 
 
        <tr> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
        </tr> 
 
        </table> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <br /> 
 
     <div class="row"> 
 
     <div class="panel-group accord"> 
 
      <div class="panel panel-primary"> 
 
      <div class="panel-heading"><a data-toggle="collapse" href="#collapse2"><span style="color: white">Information</span></a></div> 
 
      <div id="collapse2" class="panel-collapse collapse"> 
 
       <div class="panel-body" style="overflow: scroll; white-space: nowrap; overflow-y: scroll;"> 
 
       <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
        <thead> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
        </tbody> 
 
        </table> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <br /> 
 
    <br /> 
 
</div>

Все строки поступают правильно, но второй, который имеет две панели не выровнена с другими строками и дисплей выглядит следующим образом -

Вторая строка не выровнена правильно. Может ли кто-нибудь помочь мне правильно выровнять его с другими строками?

источник

2016-12-21 Dalton2

я не понимаю, правильный смысл вопроса, вы ищете для этого

.panel-heading { 
 
\t border-bottom-left-radius: 3px; 
 
\t border-bottom-right-radius: 3px; 
 
\t border-top-left-radius: 3px; 
 
\t border-top-right-radius: 3px; 
 
} 
 
a, a:hover, a:visited, a:active { 
 
\t text-decoration: none !important; 
 
\t color: white !important; 
 
} 
 
span.dpi1 { 
 
\t color: crimson; 
 
} 
 
span.dpi2 { 
 
\t color: red; 
 
} 
 
table, td, tr { 
 
border-top-color: 
 
} 
 
.accord { 
 
\t margin-top:15px; 
 
\t float:left; 
 
\t width:100%; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <div class="container-fluid"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-body" style="margin-left: 10px;"> 
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
      <label>Enter <span class="dpi1">*</span></label> 
 
      <input id="searchText" type="text" size="50" autofocus="autofocus" /> 
 
      <button id="searchButton" type="button" class="btn btn-primary" >Search</button> 
 
      </div> 
 
      <div class="pull-right"> 
 
      <label><span class="dpi2">* Mandatory</span></label> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <br /> 
 
    <div> 
 
     <div class="col-xs-12 pull-right text-right"> 
 
     <button type="button" class="btn btn-primary" id="expand"><span class="glyphicon glyphicon-arrow-down">Expand All</span></button> 
 
     <button type="button" class="btn btn-primary" id="collapse"><span class="glyphicon glyphicon-arrow-up">Collapse All</span></button> 
 
     </div> 
 

 

 
     <div class="panel-group accord" id="showAgain"> 
 
      <div class="panel panel-primary"> 
 
      <div class="panel-heading"><a data-toggle="collapse" href="#collapseA"><span style="color: white">Summary</span></a></div> 
 
      <div id="collapseA" class="panel-collapse collapse in"> 
 
       <div class="panel-body" style="white-space: nowrap; overflow-y: scroll;"> 
 
       <div class="col-md-4"> 
 
        <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
        </table> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4"> 
 
        <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
        </table> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4"> 
 
        <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
        </table> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <br /> 
 
     <div class="row"> 
 
     <div class="col-md-4"> 
 
      <div class="panel-group accord"> 
 
      <div class="panel panel-primary"> 
 
       <div class="panel-heading"><a data-toggle="collapse" href="#collapseB"><span style="color: white">Information</span></a></div> 
 
       <div id="collapseB" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
         <thead> 
 
         <tr> 
 
          <th></th> 
 
          <th>xx</th> 
 
          <th>xxx</th> 
 
          <th>xxx</th> 
 
         </tr> 
 
         </thead> 
 
         <tr> 
 
         <td><b>Customer No</b></td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <td><b>First Name</b></td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <td><b>Last Name</b></td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <td><b>Address</b></td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <td><b>Contact No.</b></td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
         <tr> 
 
         <td><b>Email</b></td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
        </table> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-8"> 
 
      <div class="panel-group accord"> 
 
      <div class="panel panel-primary"> 
 
       <div class="panel-heading"><a data-toggle="collapse" href="#collapseC"><span style="color: white">Information</span></a></div> 
 
       <div id="collapseC" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
         <thead> 
 
         <tr> 
 
          <th>XXXXXXX</th> 
 
          <th>XXXXXXX</th> 
 
          <th>XXXXXXX</th> 
 
         </tr> 
 
         </thead> 
 
         <tr> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
        </table> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="panel-group accord"> 
 
      <div class="panel panel-primary"> 
 
      <div class="panel-heading"><a data-toggle="collapse" href="#collapse1"><span style="color: white">Information</span></a></div> 
 
      <div id="collapse1" class="panel-collapse collapse"> 
 
       <div class="panel-body" style="overflow: scroll; white-space: nowrap; overflow-y: scroll;"> 
 
       <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
        <thead> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         </tr> 
 
        </thead> 
 
        <tr> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
        </tr> 
 
        </table> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel-group accord"> 
 
      <div class="panel panel-primary"> 
 
      <div class="panel-heading"><a data-toggle="collapse" href="#collapse2"><span style="color: white">Information</span></a></div> 
 
      <div id="collapse2" class="panel-collapse collapse"> 
 
       <div class="panel-body" style="overflow: scroll; white-space: nowrap; overflow-y: scroll;"> 
 
       <div class="table-responsive"> 
 
        <table class="table table-hover"> 
 
        <thead> 
 
         <tr> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         <th>XXXXXXX</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         <td>XXXXXXX</td> 
 
         </tr> 
 
        </tbody> 
 
        </table> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

источник

2016-12-21 08:44:44

С Bootstrap, .row необходимо обернуть в .container или .container-fluid. Вы должны добавить 2 .container-fluid, как в this Bootply
Это не решает проблему, описанную в вашем вопросе: вы также должны добавить .col-xs-12 (xs или другой интервал ширины) в качестве прямого ребенка каждого из .row. Как только это будет сделано, вы должны переместить «модификаторы сетки», например, .pull-right от .row к этим элементам столбца; в противном случае я уверен, что он не играет хорошо с сеткой Bootstrap.

См Grid documentation

Строки должна быть размещена в пределах .container (фиксированная ширина) или .container-жидкости (полная ширина) для правильного выравнивания и заполнения.

Используйте строки для создания горизонтальных групп столбцов.

Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк.

Предопределенные классы сетки, такие как .row и .col-xs-4, доступны для быстрого создания макетов сетки. Меньшие миксины также могут использоваться для более семантических макетов.

и т.д.

источник

2016-12-21 08:34:54 FelipeAls

Но я хочу, чтобы иметь полный экран ширину, а не в штучной упаковке, как это происходит с контейнером. Любой обходной путь для этого? – Dalton2

Я отредактировал свой ответ: '.container-fluid' создаст сетку _fluid_ (полная ширина). Вы также должны иметь .col (-sth) в качестве прямого дочернего элемента .row. tl; dr простая сетка: '.container (-fluid)>. row> .col (-rwd) - [1..12]'. Вложенная сетка: '.container (-fluid)>. Row> .col (-rwd) - [1..12]>. Row> .col (-rwd) - [1..12]' – FelipeAls

Вам просто нужно добавить один обертку строку класс для col-md-4 и col-md-8, чтобы получить правильное выравнивание этих div и в полном представлении, если вы не хотите обертывать предметы в контейнере. ли это

<div class="row"> 
    <div class="row"> 
     <div class="col-md-4">

Вместо

<div class="row"> 
    <div class="col-md-4">

источник

2016-12-21 08:47:49 Manishh

Бутстрап выравнивания сетки не отображаются должным образом

ответ

Смежные вопросы