引导行和列不起作用

Posted 2023-03-06

技术标签:

【中文标题】引导行和列不起作用【英文标题】：bootstrap rows and columns not working 【发布时间】：2014-09-17 17:11:12 【问题描述】：

无论我做什么，内容都不会显示在列中，始终只是垂直堆栈。你们可以仔细检查我的代码吗？也许这是我缺少的东西？

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Website</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <script src="js/respond.js"></script>
    </head>
    <body>
        <!-- row 1 -->
        <div class="row"> 
            <a href="#"><img src="img/logo.png" ></a>
            <img src="img/animals.jpg" >
        </div>
        <!-- end row 1 -->
        <!-- row 2 -->
        <div class="row">
            <h1> We treat your pets like our own</h1>

            <p>At Wisdom Pet Medicine, we strive to blend the best in traditional and alternative healing techniques to diagnose and treat companion animals, including dogs, cats, birds, reptiles, rodents, and fish.</p>
        </div>
        <!-- end row 2 -->
        <!-- row 3 -->
        <div class="row">
            <div class="col-md-3">
                <p>
                    <img src="img/gsd.jpg" >
                </p>
                <h4>Thanks for helping our German Shepherd</h4>

                <p>During the summer, my German Shorthair Pointer, Tonto, began to have severe redness and itching on his belly and feet. Through diagnostic testing, we learned that Tonto is severely allergic to over a dozen kinds of grass pollens.</p>
                <p><a href="#">Read more >></a>
                </p>
            </div>
            <div class="col-md-3">
                <p>
                    <img src="img/kitten.jpg" >
                </p>
                <h4>Our diabetic kitty is better</h4>

                <p>When Samantha, our sweet kitten, began sleeping all the time and urinating excessively, we brought her to see the specialists at Wisdom. After running a blood test, Dr. Winthrop confirmed what we all feared – Samantha was showing signs of diabetes.</p>
                <p><a href="#">Read more >></a>
                </p>
            </div>
            <div class="col-md-3">
                <p>
                    <img src="img/bulldog.jpg" >
                </p>
                <h4>Our grape-loving dog</h4>

                <p>The staff at Wisdom worked tirelessly to determine why our three-year old bulldog, Roxie, started going into sudden kidney failure. They stabilized her and provided fluids until her kidneys were again functioning normal, but it was still a mystery as to what caused her health to decline so quickly.</p>
                <p><a href="#">Read more >></a>
                </p>
            </div>
            <div class="col-md-3">
                <p>
                    <img src="img/goldfish.jpg" >
                </p>
                <h4>A dog antibiotic cured our fish</h4>

                <p>Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments. When our 13-year old goldfish, McAllister, turned from silvery white to an angry red, we called around, urgently trying to find a veterinarian who could help. Wisdom not only got us in the same day, but also was able to diagnose McAllister as having a severe case of septicemia.</p>
                <p><a href="#">Read more >></a>
                </p>
            </div>
        </div>
        <!-- end row 3 -->
        <!-- row 4 -->
        <footer class="row">
            <p>This not a real veterinary medicine site, and is not meant to diagnose or offer treatment. Please see your veterinarian for all matters related to your pet's health.</p>
            <p>Wisdom Pet Medicine is a training brand owned by lynda.com.</p>
        </footer>
        <!-- end row 4 (footer) -->
        <!-- javascript -->
        <script src="js/jquery-2.1.1.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

另外...我从他们的主页下载的 Bootstrap 3 文件是加密的？我一直无法移动、复制或编辑它们？

我尝试右键单击>属性>高级>取消选中加密

但它告诉我我没有权限？有没有办法解决这个问题？

【问题讨论】：

您可能没有正确包含 CSS。您是否单击了来自getbootstrap.com/getting-started 的“下载引导程序”大按钮？您也可以使用其下方的 CDN 开始。其次，确保.row 中的唯一元素是.col- 元素。否则你的利润会被搞砸。其实你的代码没有问题。您所要做的就是增加浏览器的大小（如果您在一个遍布整个桌面的小窗口中查看它），那么您就会看到它本来的显示方式。 【参考方案1】：

Bootstrap 是一个很棒的框架，虽然在使用它时，你必须知道有些类是必须的，你要知道。让我给你介绍几个重要的。

如果您希望引导页面具有响应性，容器和行是非常重要的类。

以下是您在使用 Bootstrap 时需要遵循的一些规则：

row

要详细说明我所说的，请看下面

<div class="container">
<div class="row">
    <div class="col-md-3">
        <h1>hey hey i span 3 coloumbs and bootstrap allows a maximum of 12 
            so i have another 9 columns more i can create and after that i will have to declare another 
            "row " class , though I can declare the new row class in the same container 
        </h1>
    </div>  

    <div class="col-md-3">
        <h1>hey hey i span 3 coloumbs and bootstrap allows a maximum of 12 
            so i have another 6 coloums more i can create and after that i will have to declare another 
            "row " class , though i can declare the new row class in the same container 
        </h1>
    </div>  

    <div class="col-md-3">
        <h1>hey hey i span 3 coloumbs and bootstrap allows a maximum of 12 
            so i have another 3 coloums more i can create and after that i will have to declare another 
            "row " class , though i can declare the new row class in the same container 
        </h1>
    </div>  

    <div class="col-md-3">
        <h1>hey hey i span 3 coloumbs and bootstrap allows a maximum of 12 
            so i have another 0 coloums more i can create and after that i will have to declare another 
            "row " class , though i can declare the new row class in the same container 
        </h1>
    </div>  

    <!-- now that we have used up all the 12 coloumbs in this row , lets go create a new "row class" , Alas in the same container -->
</div>  <!-- end of row -->

<div class="row">
    <div class="col-md-12">
        <h1>I am a col , that spans the entire 12 coloumbs that this row had to offer , by now you should know that if you want to create another coloumb , you have to go create another "row" class</h1>
    </div>
</div>
</div>  <!-- end of container -->

现在复制上面的代码，如果你不能在这里查看它并将它粘贴到你的文本编辑器中，比较你的代码，然后我的并检查你没有添加 container 和 row 类的地方并添加它们. Bootstrap 是一个很棒的框架，但是您必须添加某些类并且它们是必须的，否则 Bootstrap 将无法工作。

希望这能解决您的问题，我本可以轻松地编辑您的代码并告诉您出了什么问题，但我认为了解 Bootstrap 代码的结构对您来说更重要。

另外，说到最后一点，在本地工作，下载的副本总是比 CDN 好，避免摆弄 Bootstrap.css 文件，除非你知道自己在做什么，编写一个单独的 CSS 文件来覆盖现有的引导代码。谷歌搜索“GitHub Bootstrap 3.0”，去本地下载bootstrap.css文件，就可以编辑了。

【讨论】：

OP 正在学习教程，我可以通过代码的结构方式来判断。也因为我在开始 BS 时做了完全相同的教程。很可能，OP 还没有了解网格系统。我花了一段时间才明白，当你说 BS 时，你的意思是 Bootstrap。【参考方案2】：

尝试不同的方法来添加文件 - 通过您的 head 标签直接链接它们。将以下内容放在您的头部；它是直接从网站上提取的：

HTML（头部）：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

这会将所有必要的文件链接到您的 HTML。但是，您可以在结束之前将最后一个链接 (javascript) 添加到正文标记的底部，以提高性能。为了向您展示您的语法是正确的，请按照以下链接查看我制作的演示，该演示显示了您使用 BootStrap 3.2 的确切代码。这应该在您尝试完成的 Lynda 练习中涵盖；)