Fatal编程技术网

Twitter bootstrap 引导行和列不工作

twitter-bootstrap

Twitter bootstrap 引导行和列不工作,twitter-bootstrap,Twitter Bootstrap,不管我怎么做，内容永远不会显示在列中，始终只是一个垂直堆栈。你们能再检查一下我的密码吗？也许是我错过了什么 <!doctype html> <html> <head> <meta charset="utf-8"> <title>My Website</title> <meta name="viewport" content="width=device-width,

不管我怎么做，内容永远不会显示在列中，始终只是一个垂直堆栈。你们能再检查一下我的密码吗？也许是我错过了什么

<!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" alt="Wisdom Pets. click for home."></a>
            <img src="img/animals.jpg" alt="">
        </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" alt="">
                </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" alt="">
                </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" alt="">
                </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" alt="">
                </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>


我的网站
我们像对待自己的宠物一样对待你的宠物
在智慧宠物医学公司，我们致力于将传统和替代治疗技术中的最佳技术融合在一起，以诊断和治疗同伴动物，包括狗、猫、鸟、爬行动物、啮齿动物和鱼类




谢谢你帮助我们的德国牧羊犬
夏天，我的德国短发指针Tonto的腹部和脚开始出现严重的发红和瘙痒。通过诊断测试，我们了解到Tonto对十几种草花粉严重过敏







我们的糖尿病猫好多了
当我们可爱的小猫萨曼莎开始无时无刻不在睡觉，小便过度时，我们带她去智慧医院看专家。温斯洛普医生进行了血液测试，证实了我们都担心的事情——萨曼莎出现了糖尿病的迹象







我们的爱吃葡萄的狗
智慧的工作人员不知疲倦地工作，以确定为什么我们三岁的斗牛犬Roxie开始突然肾衰竭。他们稳定了她的病情，并为她提供液体，直到她的肾脏功能恢复正常，但究竟是什么原因导致她的健康状况如此迅速下降，这仍然是一个谜







狗治好了我们的鱼
智慧宠物医学是世界上唯一一家甚至会预约宠物鱼的诊所。当我们13岁的金鱼McAllister从银白色变成愤怒的红色时，我们四处打电话，急切地想找一位兽医帮忙。智慧不仅让我们在同一天，而且能够诊断出麦卡利斯特患有严重的败血症




这不是一个真正的兽医网站，也不是用来诊断或提供治疗的。有关宠物健康的所有事宜，请咨询兽医

智慧宠物医疗是lynda.com旗下的一个培训品牌
还有…我从他们的主页下载的Bootstrap3文件是加密的吗？我无法移动、复制或编辑它们

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

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

Bootstrap是一个非常棒的框架，不过在使用它时，您必须知道有些类是必须的，您必须知道。让我给你讲讲几个重要的问题

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

以下是使用引导时需要遵循的一些规则：

  • 所有内容都包装在一个容器类中
  • 接下来是row类，它最多可以包含12列。如果要添加更多，请添加另一个
    行
    类，然后在该行中声明所需的列数
    • 要详细说明我说的话，请看下面

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

    
hey hey i跨越3个克隆，引导最多允许12个克隆
因此，我还有9列可以创建，之后我必须声明另一列
“row”类，但我可以在同一容器中声明新的row类
hey hey i跨越3个克隆，引导最多允许12个克隆
所以我还有6个冒号可以创建，之后我必须声明另一个冒号
“row”类，但我可以在同一容器中声明新的row类
hey hey i跨越3个克隆，引导最多允许12个克隆
所以我还有3个冒号可以创建，之后我必须声明另一个冒号
“row”类，但我可以在同一容器中声明新的row类
hey hey i跨越3个克隆，引导最多允许12个克隆
所以我可以再创建0个冒号，之后我必须声明另一个冒号
“row”类，但我可以在同一容器中声明新的row类
我是一个col，它跨越了这一行必须提供的全部12个columb，现在你应该知道，如果你想创建另一个columb，你必须创建另一个“row”类
    现在，如果您不能在此处查看上述代码，请将其复制并粘贴到文本编辑器中，比较您的代码，然后挖掘并检查您没有添加
    容器
    和
    行
    类的位置，然后添加它们。Bootstrap是一个很好的框架，但是您必须添加某些类，它们是必须添加的，否则Bootstrap将无法工作

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

    另外，说到最后一点，在本地工作，下载的拷贝总是比CDN好，避免f 
    <!-- 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>