个人中心
gpt4 book ai didi

html - Bootstrap 列对齐

转载 作者：太空宇宙 更新时间：2023-11-04 13:15:13 25 4
gpt4 key购买 nike

我在排列列时遇到问题。它在浏览器上不是垂直对齐的。我使用 Bootstrap 使用网格系统并试图满足一些要求。任何人都可以修复我的代码或帮助我修复我的代码吗？

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

最佳答案

您的代码存在的问题是您的 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>

关于html - Bootstrap 列对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28258802/

25 4 0
文章推荐： java - 如何在java中获取字符串数组中的所有下拉值？
文章推荐： c++ - priority_queue 类字段使用访问另一个类字段的比较器
文章推荐： java - 在 liquibase 中运行 Java 代码变更集时获取 liquibase.exception.CustomChangeException
文章推荐： c++ - boost 累加器示例不编译
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com