无论我做什么，内容永远不会显示在列中，始终只是一个垂直堆栈。你们可以仔细检查我的代码吗？也许这是我失踪的东西？
<!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>
另外......我从主页下载的Bootstrap 3文件是加密的吗？我一直无法移动它们，复制它们或编辑它们？
我试图右键点击＆gt;属性＆gt;高级＆gt;取消加密
但它告诉我，我没有获得许可？有办法解决这个问题吗？
答案 0 :(得分：14)
Bootstrap是一个很棒的框架，但在使用它时，你必须知道某些类是必须的，你要知道。让我来看看几个重要的内容。
如果您希望Bootstrap页面具有响应能力，容器和行是非常重要的类。
以下是使用Bootstrap时需要遵循的一些规则：
row类，然后在行内，声明所需的col数。详细说明我所说的内容，请看下面
<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文件，它就可以编辑了。
答案 1 :(得分：5)
我遇到了完全相同的问题。我使用了col-sm-*代替col-md-*，但它确实有效。
这里有一些参考：What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
答案 2 :(得分：1)
尝试使用其他方法添加文件 - 通过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）添加到body标签的底部，以提高性能。为了向您显示您的语法是否正确，请按照以下链接查看我生成的演示，其中显示了使用BootStrap 3.2的确切代码。这应该在你试图完成的Lynda练习中涵盖;）
答案 3 :(得分：0)
这是因为当您将导航栏固定在顶部后，主体部分中的内容将从浏览器窗口的最顶部像素开始，现在隐藏在导航栏后面。在你已经指定行和列的类容器中给它们style =“margin-top：100px”这个100px可以是根据你的导航栏大小的任何px。尝试仅使用100px并显示行。
答案 4 :(得分：-1)
在bootstrap.min.css的链接中
确保相对于目录“dist / css / bootstrap.min.css”