twitter-bootstrap 引导行和列不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24962640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap rows and columns not working
提问by user3429394
No matter what I seem to do the content is never displayed in columns, always just a vertical stack. Can you guys double check my code? Maybe it's something I'm missing?
无论我似乎做什么，内容都不会显示在列中，始终只是垂直堆叠。你们能仔细检查我的代码吗？也许这是我缺少的东西？
<!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>
Also...the Bootstrap 3 files I downloaded from their home page are encrypted? I've been unable to move them, copy them or edit them?
另外……我从他们的主页下载的 Bootstrap 3 文件是加密的吗？我一直无法移动、复制或编辑它们？
I tried to right-click > properties > advanced > un-check encryption
我尝试右键单击 > 属性 > 高级 > 取消选中加密
but it told me I don't have permission? Is there a way to fix this?
但它告诉我我没有权限？有没有办法解决这个问题？
回答by gautamz07
Bootstrap is an awesome framework, though while using it, you must know that there are certain classes that are a must, for you to know. Let me run you through a couple important ones.
Bootstrap 是一个很棒的框架，但是在使用它时，您必须知道某些类是必须的，您必须知道。让我为您介绍几个重要的问题。
Containers and rows are very important classes if you want your Bootstrap pages to be responsive.
如果您希望 Bootstrap 页面具有响应性，则容器和行是非常重要的类。
Here are a few rules you need to follow when using Bootstrap:
以下是使用 Bootstrap 时需要遵循的一些规则：
- Everything gets wrapped in a container class;
- The row class immediately comes next and can contain a maximum of 12 columns in it. If you want to add more, add another
rowclass and then inside the row, declare the number of col's you want.
- 一切都被包裹在一个容器类中；
- 行类紧随其后，其中最多可包含 12 列。如果要添加更多，请添加另一个
row类，然后在行内声明所需的列数。
To elaborate on what I said, take a look below
为了详细说明我所说的，请看下面
<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 -->
Now copy the above code if you can't view it here and paste it in your text editor, compare your code, and mine and check where you haven't added the containerand rowclasses and add them. Bootstrap is a great framework, but there are certain classes that you must add and they are a must or else Bootstrap just won't work.
如果您无法在此处查看，请复制上面的代码并将其粘贴到您的文本编辑器中，比较您的代码，然后挖掘并检查您尚未添加container和row类的位置并添加它们。Bootstrap 是一个很棒的框架，但是您必须添加某些类并且它们是必须的，否则 Bootstrap 将无法工作。
Hope this solves your problem, I could have easily edited your code and told you what's wrong, but I thought it was more important for you to know the structure of Bootstrap code.
希望这能解决您的问题，我可以轻松地编辑您的代码并告诉您出了什么问题，但我认为了解 Bootstrap 代码的结构对您来说更为重要。
Also, coming to your last point, working locally, a downloaded copy is always better than a CDN, avoid fiddling with the Bootstrap.css file unless you know what you're doing, write a separate CSS file that overrides the existing Bootstrap code. Make a Google search for "GitHub Bootstrap 3.0" and go download the bootstrap.cssfile locally, and it's all ready to be edited.
此外，最后一点，在本地工作，下载的副本总是比 CDN 好，除非你知道自己在做什么，否则避免摆弄 Bootstrap.css 文件，编写一个单独的 CSS 文件来覆盖现有的 Bootstrap 代码。在 Google 上搜索“GitHub Bootstrap 3.0”，然后将bootstrap.css文件下载到本地，就可以编辑了。
回答by Deke
I had the exact same problem. I used col-sm-*instead of col-md-*and it works.
我有同样的问题。我使用了col-sm-*而不是col-md-*它的工作原理。
here is some reference: What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
回答by BuddhistBeast
Try a different approach to adding in the files - directly link them via your head tag. Put the following in your head section; it was pulled straight from the website:
尝试不同的方法来添加文件 - 通过您的 head 标签直接链接它们。将以下内容放在您的头部部分；它是直接从网站上拉下来的：
HTML (Head Section):
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>
This will link all of the necessary files to your HTML. However, you can add the last link (javascript) to the bottom of your body tag, just before you end it, for performance. To show you that your syntax is correct, follow the below link to see the demo I have produced that shows your exact code working with BootStrap 3.2. This should have been covered in the Lynda Exercises you are trying to complete ;)
这会将所有必需的文件链接到您的 HTML。但是，您可以将最后一个链接 (javascript) 添加到 body 标记的底部，就在结束之前，以提高性能。为了向您展示您的语法是正确的，请按照以下链接查看我制作的演示，其中显示了您使用 BootStrap 3.2 的确切代码。这应该已包含在您尝试完成的 Lynda 练习中；)
DEMO JSFiddle
演示 JSFiddle
回答by hithard
This is because when you have fixed the navbar at the top the content after that in the body section will start from top most pixel of the browser window and is right now hidden behind your navigation bar. in your class container in which you have specified the rows and columns give them style="margin-top:100px " this 100px could be any px according to your size of the navbar. Try with 100px only and the rows will appear.
这是因为当您将导航栏固定在顶部时，正文部分之后的内容将从浏览器窗口的最顶部像素开始，现在隐藏在导航栏后面。在您指定行和列的类容器中，根据您的导航栏的大小，将它们设置为 style="margin-top:100px" 这个 100px 可以是任何 px。仅使用 100px 尝试，就会出现行。
回答by rob
In the link for bootstrap.min.cssMake sure to reference relatively to the directory "dist/css/bootstrap.min.css"
在bootstrap.min.css确保引用相对于目录“dist/css/bootstrap.min.css”的链接中
