Bootstrap列对齐

时间：2015-02-01 02:32:06

标签： html twitter-bootstrap

我遇到了Column的问题。它没有在浏览器上垂直排列。我使用引导程序的网格系统，并试图满足一些要求。任何人都可以修复我的代码或帮我修改代码吗？

＆＃13;
＆＃13; 
![<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题