1. 홈
  2. 질의 응답
  3. 부트 스트랩 기둥 배열

부트 스트랩 기둥 배열

2015-02-01 2 views
3

기둥 정렬에 문제가 있습니다. 브라우저에서 세로로 정렬되지 않았습니다. 부트 스트랩을 사용하여 그리드 시스템을 사용하고 몇 가지 요구 사항을 충족하려고했습니다. 누구든지 내 코드를 수정하거나 내 코드를 수정할 수 있습니까?부트 스트랩 기둥 배열

![<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta][1] charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
    
 

 
    
 
    
 
</head> 
 
<body style= " background-color:grey;"> 
 
    
 

 

 
    
 
    <div class="container"> 
 
     <!-- Example row of columns --> 
 
<!--  outer row--> 
 
     <div class="row"> 
 
      <div class ="col-md-3"> 
 
       <div class="row" > 
 
        <div class="col-md-12" style= "border: 2px solid black; background-color:orange; "> 
 
        <h2>Heading 1</h2> 
 
        <p> left SIDE BAR </p> 
 
        
 
        </div> 
 
        
 
        <div class="col-md-12" style= "border: 2px solid black; background-color:orange;"> 
 
        <h2>Heading 2 </h2> 
 
        <p> LEFT SIDE BAR CONTENT2</p> 
 
        
 
        </div> 
 
       </div> 
 
      
 
      </div> 
 
      
 
      <div class ="col-md-8 col-md-offset-1" > 
 
      
 
      <div class="row"> 
 
      <div class="col-md-4" style="border: 2px solid black; background-color:Yellowgreen;"> 
 
       <h2>Heading</h2> 
 
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut  fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
 
      </div> 
 
      <div class="col-md-4" style="border: 2px solid black; background-color:Salmon;"> 
 
       <h2>Heading</h2> 
 
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
 
       
 
      </div> 
 
      <div class="col-md-4"style="border: 2px solid black; background-color:Coral;"> 
 
       <h2>Heading</h2> 
 
       <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
 
       
 
      </div> 
 
       <div class="row"> 
 
       <div class="col-md-4" style= "border: 2px solid black; background-color:orange;"> 
 
        <h2>Heading</h2> 
 
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut  fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
 
       </div> 
 
       <div class="col-md-4" style= "border: 2px solid black; background-color:purple;"> 
 
        <h2>Heading</h2> 
 
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
 
        
 
       </div> 
 
       <div class="col-md-4" style="border: 2px solid black; background-color:lightblue;"> 
 
        <h2>Heading</h2> 
 
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
 
        
 
       </div> 
 
       </div> 
 
        <div class="row"> 
 
         <div class="col-md-4" style="border: 2px solid black; background-color:green;"> 
 
          <h2>Heading</h2> 
 
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut  fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
 
         </div> 
 
         <div class="col-md-4" style="border: 2px solid black; background-color:red;"> 
 
          <h2>Heading</h2> 
 
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
 
          
 
         </div> 
 
         <div class="col-md-4" style="border: 2px solid black; background-color:lavender;"> 
 
          <h2>Heading</h2> 
 
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
 
          
 
         </div> 
 
       
 
        </div> 
 
      
 
      </div> 
 
      </div> 
 
      
 
     </div> 
 
    </div> 
 
    
 

 
</body> 
 
</html>

출처

2015-02-01 user3487775

답변

0

코드의 문제는 HTML 올바르게 div 태그를 닫지되지 않는 것입니다. 첫 번째 행의 div를 닫는 것을 잊었고 다른 행을 닫았습니다. 여기에 당신의 조각은 고정 된 것 :

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta 
 
    ][1] charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 

 
</head> 
 
<body style=" background-color:grey;"> 
 

 

 
</div> 
 
<div class="container"> 
 
    <!-- Example row of columns --> 
 
    <!--  outer row--> 
 
    <div class="row"> 
 
    <div class="col-md-3"> 
 
     <div class="row"> 
 
     <div class="col-md-12" style="border: 2px solid black; background-color:orange; "> 
 
      <h2>Heading 1</h2> 
 
      <p> left SIDE BAR </p> 
 

 
     </div> 
 

 
     <div class="col-md-12" style="border: 2px solid black; background-color:orange;"> 
 
      <h2>Heading 2 </h2> 
 
      <p> LEFT SIDE BAR CONTENT2</p> 
 

 
     </div> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="col-md-8 col-md-offset-1"> 
 

 
     <div class="row"> 
 
     <div class="col-md-4" style="border: 2px solid black; background-color:Yellowgreen;"> 
 
      <h2>Heading</h2> 
 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris 
 
      condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. 
 
      Donec sed odio dui. </p> 
 
     </div> 
 
     <div class="col-md-4" style="border: 2px solid black; background-color:Salmon;"> 
 
      <h2>Heading</h2> 
 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris 
 
      condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. 
 
      Donec sed odio dui. </p> 
 

 
     </div> 
 
     <div class="col-md-4" style="border: 2px solid black; background-color:Coral;"> 
 
      <h2>Heading</h2> 
 
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta 
 
      felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum 
 
      massa justo sit amet risus.</p> 
 

 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-4" style="border: 2px solid black; background-color:orange;"> 
 
      <h2>Heading</h2> 
 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris 
 
      condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. 
 
      Donec sed odio dui. </p> 
 
     </div> 
 
     <div class="col-md-4" style="border: 2px solid black; background-color:purple;"> 
 
      <h2>Heading</h2> 
 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris 
 
      condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. 
 
      Donec sed odio dui. </p> 
 

 
     </div> 
 
     <div class="col-md-4" style="border: 2px solid black; background-color:lightblue;"> 
 
      <h2>Heading</h2> 
 
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula 
 
      porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut 
 
      fermentum massa justo sit amet risus.</p> 
 

 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-4" style="border: 2px solid black; background-color:green;"> 
 
      <h2>Heading</h2> 
 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris 
 
      condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. 
 
      Donec sed odio dui. </p> 
 
     </div> 
 
     <div class="col-md-4" style="border: 2px solid black; background-color:red;"> 
 
      <h2>Heading</h2> 
 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris 
 
      condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. 
 
      Donec sed odio dui. </p> 
 

 
     </div> 
 
     <div class="col-md-4" style="border: 2px solid black; background-color:lavender;"> 
 
      <h2>Heading</h2> 
 
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula 
 
      porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut 
 
      fermentum massa justo sit amet risus.</p> 
 

 
     </div> 
 

 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</div> 
 
</body> 
 
</html>

출처

2016-02-01 20:11:35 rfsbsb

관련 문제

 관련 문제