2列のブートストラップレイアウトの列が2行を占めない

ブートストラップのレイアウトに問題があります。私は状況に関するいくつかの詳細を見つけるために、以下のリンクを見ました。2列のブートストラップレイアウトの列が2行を占めない

How can I get a Bootstrap column to span multiple rows?

しかし、私はこの問題を解決する方法を見つけ出すcouldntの：

----------私が持っているもの----------

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>title</title> 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/styles.css" rel="stylesheet"> 
</head> 
<body> 
<div class="container"> 
    <!-- First row, directions --> 
    <div class="row top-buffer"> 
     <div class="col-md-12"> 
      <br><br><br><br> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2"> 
      <a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a> 
      <br> 
      <form class="form-inline"> 
       <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height"> 
        <a class="btn btn-primary" href="results.html" role="button"> < </a> 
        <a class="btn btn-secondary " role="button"> 1/3 </a> 
        <a class="btn btn-primary " href="results.html" role="button"> > </a> 
       </div> 
      </form> 
     </div> 
     <div class="col-md-1"> 
     </div> 
     <div class="row"> 

      <div class="col-md-4"> 
       <label class="checkbox-inline"><input type="checkbox" value=""></label> 
       <label class="checkbox-inline"><input type="checkbox" value=""></label> 
       <label class="checkbox-inline"><input type="checkbox" value=""></label> 
       <br> 
       <div class="form-group"> 
        <label for="search">Search</label> 
        <input type="text" class="form-control" id="search"> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-2"></div> 
      <div class="col-md-1"></div> 
      <div class="col-md-4"> 
       <form class="form-inline"> 
        <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height"> 
         <a class="btn btn-primary" href="results.html" role="button"> < </a> 
         <a class="btn btn-secondary " role="button"> 1/3 </a> 
         <a class="btn btn-primary " href="results.html" role="button"> > </a> 
        </div> 
       </form> 
      </div> 
     </div> 
     <div class="col-md-1"> 
     </div> 
    </div> 
</div> 
</body> 
</html>

----------私が欲しいもの----------

picture wanted

*注、拡張ボックス（左）は、彼らが田部さんであるかのようにあなたが行または列にまたがることはできません行全体に

出典

2016-04-29 Martijn Woudstra

を埋める必要があります。あなたは少し

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
     <style> 
 
     .row { border: 1px solid #f00;} 
 
      [class*="col-"] { border: 1px solid #0f0; } 
 
     </style> 
 

 
    <div class="container"> 
 
     <div class="row top-buffer"> 
 
      <div class="col-xs-12"> 
 
       &nbsp; 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-xs-2"> 
 
       <a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a> 
 
       <br> 
 
       <form class="form-inline"> 
 
        <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height"> 
 
         <a class="btn btn-primary" href="results.html" role="button"> < </a> 
 
         <a class="btn btn-secondary " role="button"> 1/3 </a> 
 
         <a class="btn btn-primary " href="results.html" role="button"> > </a> 
 
        </div> 
 
       </form> 
 
      </div> 
 
      <div class="col-xs-1"> 
 
       &nbsp; 
 
      </div> 
 
       <div class="col-xs-4"> 
 
        <label class="checkbox-inline"><input type="checkbox" value=""></label> 
 
        <label class="checkbox-inline"><input type="checkbox" value=""></label> 
 
        <label class="checkbox-inline"><input type="checkbox" value=""></label> 
 
        <br> 
 
        <div class="form-group"> 
 
         <label for="search">Search</label> 
 
         <input type="text" class="form-control" id="search"> 
 
        </div> 
 
        <form class="form-inline"> 
 
         <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height"> 
 
          <a class="btn btn-primary" href="results.html" role="button"> < </a> 
 
          <a class="btn btn-secondary " role="button"> 1/3 </a> 
 
          <a class="btn btn-primary " href="results.html" role="button"> > </a> 
 
         </div> 
 
        </form> 
 
       </div> 
 
     </div> 
 
     </div>

あなたのマークアップを変更する必要があり、私はちょうどスニペットフレームの内側に反応するだろうからそれらを防ぐためにmdからxsに列を変更しました。

出典

2016-04-29 18:13:20 Gabriel

2列のブートストラップレイアウトの列が2行を占めない

答えて

関連する問題