twitter-bootstrap – bootstrap行和列不起作用
发布时间：2020-12-17 20:40:53 所属栏目：安全 来源：网络整理
导读：无论我做什么,内容永远不会显示在列中,总是只是一个垂直堆栈.你们可以仔细检查我的代码吗？也许这是我缺少的东西？ !doctype htmlhtml head meta charset="utf-8" titleMy Website/title meta name="viewport" content="width=device-width,initial-scale=1.
|
无论我做什么,内容永远不会显示在列中,总是只是一个垂直堆栈.你们可以仔细检查我的代码吗？也许这是我缺少的东西？
<!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文件是加密的吗？我一直无法移动它们,复制它们或编辑它们？ 我试图右键单击>属性>高级>取消加密 但它告诉我,我没有许可？有没有办法来解决这个问题？ 解决方法
Bootstrap是一个很棒的框架,但在使用它时,你必须知道某些类是必须的,你要知道.让我来看看几个重要的事情.
如果您希望Bootstrap页面具有响应能力,容器和行是非常重要的类. 以下是使用Bootstrap时需要遵循的一些规则： >所有东西都被包装在容器类中; 详细说明我所说的内容,请看下面的内容 <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 -->
现在复制上面的代码,如果你不能在这里查看并将其粘贴到文本编辑器中,比较你的代码,我的并检查你没有添加容器和行类的地方并添加它们. Bootstrap是一个很棒的框架,但是你必须添加某些类,它们是必须的,否则Bootstrap将无法工作. 希望这能解决您的问题,我可以轻松编辑您的代码并告诉您错误,但我认为了解Bootstrap代码的结构更为重要. 另外,在本地工作时,下载的副本总是比CDN好,除非你知道自己在做什么,否则要避免摆弄Bootstrap.css文件,编写一个单独的CSS文件来覆盖现有的Bootstrap代码.在谷歌搜索“GitHub Bootstrap 3.0”并在本地下载bootstrap.css文件,它就可以编辑了. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |