Bootstrap 设计在响应时表现怪异和其他问题
Bootstrap design behaving weirdly when being responsive and other problems
我正在为自己设计作品集，我决定使用 bootstrap。我已经设置了一些，但我注意到一些问题。
- 当我缩小 window 时，我的顶部菜单浓缩为一个按钮，但当我单击该按钮时没有任何反应。它应该下拉显示我的菜单，但它没有，我不确定为什么。
- 标有“我是一名艺术家”的三个部分接近我想要的方式，但仍然存在一些问题。我正在尝试 space 稍微缩小一点，这样当在桌面上查看页面时，左边会有一个框，中间有一个框，右边有一个框。如果有意义的话，我也希望盒子居中。在移动设备上查看时，我希望它的部分（现在是垂直的）会有轻微的间隙和周围的边框。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<Title>"HorrorNerd"</Title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel ="stylesheet">
<link href = "css/styles.css" rel ="stylesheet">
</head>
<body>
<div class ="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">HorrorNerd</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery">Artwork</a></li>
<li class="dropdown">
<a href="#" class="dropdown" data-toggle="dropdown">Social Media <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">Linkn</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#contact" data-toggle="modal">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="info">
<h1>I'm An Artist</h1>
<p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
<a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right" >Visit Gallery</a>
</div>
</div>
<div class="col-md-4">
<div class="info">
<h1>I'm An Artist</h1>
<p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
<a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right" >Visit Gallery</a>
</div>
</div>
<div class="col-md-4">
<div class="info">
<h1>I'm An Artist</h1>
<p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
<a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right" >Visit Gallery</a>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site by HorrorNerd.</p>
<a class="navbar-btn btn-danger btn-sml pull-right">Subscribe on Youtube</a>
</div>
</div>
<div class="modal fade" id ="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Contact HorrorNerd</h4>
</div>
<div class="modal-body">
<p>This is just a test for now.</p>
</div>
<div class="modal-footer">
<a class="btn btn-danger" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
1.a 你需要去掉 navHeaderCollapse 如果你想保留它你需要 link 到一个 id div 中的 navHeaderCollapse 和 class class="navbar-collapse collapse"。但这不是正确的方法。
1.b 由于您忘记在导航栏部分包含 <div class="navbar-header">，我认为您稍后尝试将其包含为 navHeaderCollapse。请参阅我更正的代码以了解如何使用 <div class="navbar-header">.
2.a 我没有让你的列 4 等长，而是让它们 3 等长，这样你就有了你想要的 space 围绕它们。尽管当有 3 列每 3 列长度相等时，您还剩下 3 列 space，您理想情况下希望将它们平均应用于中间列的每一侧。
因为 3 dividid by 2 是 1.5 并且不存在大小为 1 的列 and a half columns 你需要嵌套中间列然后你可以很容易地将相等的 space 应用到它的两侧并进行偏移。请查看 Offsetting columns, Grid nesting and Column ordering 了解如何操作。为了理解我对代码做了什么，请尝试使用 offset、push 和 pull classes.
2.b 为了在列堆叠时有轻微的间隙，我包含了一个媒体查询并设置了 CSS 规则以删除父列上的默认填充。
2.c 为了在列堆叠时有边框，我为给定的媒体查询添加了 CSS 边框规则。
我会将包含的样式移动到名为 "css" 的文件夹中，并将它们全部放在那里，而不是将它们放在 html 文档中。
请务必在头部找到 HTML5 填充程序和 Respond.js 以支持 IE8，如果您希望它与 IE 一起使用，这很重要。
我还 强烈建议您先阅读一些 Bootstrap 教程 ，然后再继续使用它。看着你的错误，我觉得你还没有理解它背后的概念。不丢人，我也不丢人，而且有很多人刚刚开始学习这个框架。
这并不难，几天就可以轻松学会，至少是最基础的，相信我，这是非常值得的。时间投资得当，因为如果您继续您的投资组合，您将来肯定会遇到此类问题和其他问题。
这是您更正后的 i.m.o。工作 html 和 css.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<Title>HorrorNerd</Title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HorrorNerd's Stylesheet -->
<link href = "css/styles.css" rel ="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<style type="text/css">
/* add styles to all column classes to make the grid visible and better to understand it */
/* remove this bit of css for production/the live site obviously */
/* ============================================================= */
[class*="col-"] {
background-color: #eeeeee;
background-clip: padding-box; /* research this, what is background-clip? what is padding-box? */
border: 0.2em solid transparent;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 3px solid #666;
}
/* ============================================================= */
/* remove this bit of css for production/the live site obviously */
/* media query for when the columns start to stack up or everything up to the col-md class */
@media screen and (max-width: 991px) {
/* remove the padding on either side of the columns for the given media query */
.middle-column {
padding: 0 !important; /* use of !important is a must to override Bootstrap's default CSS */
}
/* add the top-space to the 2nd and 3rd column for the given media query */
/* here you can choose between the values that fit you best */
/* I have used % values but of course you can use px or other units */
.top-space-sm-1 {
margin-top: 1%;
}
.top-space-sm-2 {
margin-top: 2%;
}
.top-space-sm-3 {
margin-top: 3%;
}
.top-space-sm-4 {
margin-top: 4%;
}
.top-space-sm-5 {
margin-top: 5%;
}
.top-space-sm-7 {
margin-top: 7%;
}
.top-space-sm-10 {
margin-top: 10%;
}
/* this is your wanted border for the columns on the given media query */
/* replace "green" with any colour you like */
.col-xs-border {
border: 2px solid green;
}
/* include this so you always have a vertical scrollbar */
/* this will avoid jumps of the page when being resized */
/* it is up to you and how your site will look later to keep or remove it */
html {
overflow-y: scroll;
}
}
</style>
<!-- navbar -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">HorrorNerd</a>
</div> <!-- div class="navbar-header" close -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a>
<li><a href="#about.html">About</a></li>
<li><a href="#blog.html">Blog</a></li>
<li><a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery">Artwork</a></li>
<li class="dropdown">
<a href="#" class="dropdown" data-toggle="dropdown">Social Media <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">Linkn</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</li>
<li><a href="#services.html">Services</a></li>
<li><a href="#contact" data-toggle="modal">Contact</a></li>
</ul>
</div>
</div> <!-- div class="container" close -->
</nav> <!-- nav close -->
<div class="container">
<div class="row">
<div class="col-xs-border col-xs-12 col-md-3">
<div class="info">
<h1>I'm An Artist</h1>
<p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
<a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right">Visit Gallery</a>
</div>
</div>
<!-- http://getbootstrap.com/css/#grid-offsetting -->
<div class="col-xs-border top-space-sm-4 middle-column col-xs-12 col-md-4 col-md-offset-1">
<!-- http://getbootstrap.com/css/#grid-nesting -->
<!-- http://getbootstrap.com/css/#grid-column-ordering -->
<div class="col-xs-12 col-md-10 col-md-push-1">
<div class="info">
<h1>I'm An Artist</h1>
<p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
<a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right">Visit Gallery</a>
</div>
</div>
</div>
<!-- http://getbootstrap.com/css/#grid-offsetting -->
<div class="col-xs-border top-space-sm-4 col-xs-12 col-md-3 col-md-offset-1">
<div class="info">
<h1>I'm An Artist</h1>
<p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
<a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right">Visit Gallery</a>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site by HorrorNerd.</p>
<a class="navbar-btn btn-danger btn-sml pull-right">Subscribe on Youtube</a>
</div>
</div>
<div class="modal fade" id ="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Contact HorrorNerd</h4>
</div>
<div class="modal-body">
<p>This is just a test for now.</p>
</div>
<div class="modal-footer">
<a class="btn btn-danger" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
祝你工作顺利！
如果此答案对您有所帮助，请不要忘记将其采纳为正确答案。谢谢:)
我正在为自己设计作品集，我决定使用 bootstrap。我已经设置了一些，但我注意到一些问题。
- 当我缩小 window 时，我的顶部菜单浓缩为一个按钮，但当我单击该按钮时没有任何反应。它应该下拉显示我的菜单，但它没有，我不确定为什么。
- 标有“我是一名艺术家”的三个部分接近我想要的方式，但仍然存在一些问题。我正在尝试 space 稍微缩小一点，这样当在桌面上查看页面时，左边会有一个框，中间有一个框，右边有一个框。如果有意义的话，我也希望盒子居中。在移动设备上查看时，我希望它的部分（现在是垂直的）会有轻微的间隙和周围的边框。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<Title>"HorrorNerd"</Title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel ="stylesheet">
<link href = "css/styles.css" rel ="stylesheet">
</head>
<body>
<div class ="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">HorrorNerd</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery">Artwork</a></li>
<li class="dropdown">
<a href="#" class="dropdown" data-toggle="dropdown">Social Media <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">Linkn</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#contact" data-toggle="modal">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="info">
<h1>I'm An Artist</h1>
<p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
<a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right" >Visit Gallery</a>
</div>
</div>
<div class="col-md-4">
<div class="info">
<h1>I'm An Artist</h1>
<p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
<a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right" >Visit Gallery</a>
</div>
</div>
<div class="col-md-4">
<div class="info">
<h1>I'm An Artist</h1>
<p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
<a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right" >Visit Gallery</a>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site by HorrorNerd.</p>
<a class="navbar-btn btn-danger btn-sml pull-right">Subscribe on Youtube</a>
</div>
</div>
<div class="modal fade" id ="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Contact HorrorNerd</h4>
</div>
<div class="modal-body">
<p>This is just a test for now.</p>
</div>
<div class="modal-footer">
<a class="btn btn-danger" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
1.a 你需要去掉 navHeaderCollapse 如果你想保留它你需要 link 到一个 id div 中的 navHeaderCollapse 和 class class="navbar-collapse collapse"。但这不是正确的方法。
1.b 由于您忘记在导航栏部分包含 <div class="navbar-header">，我认为您稍后尝试将其包含为 navHeaderCollapse。请参阅我更正的代码以了解如何使用 <div class="navbar-header">.
2.a 我没有让你的列 4 等长，而是让它们 3 等长，这样你就有了你想要的 space 围绕它们。尽管当有 3 列每 3 列长度相等时，您还剩下 3 列 space，您理想情况下希望将它们平均应用于中间列的每一侧。
因为 3 dividid by 2 是 1.5 并且不存在大小为 1 的列 and a half columns 你需要嵌套中间列然后你可以很容易地将相等的 space 应用到它的两侧并进行偏移。请查看 Offsetting columns, Grid nesting and Column ordering 了解如何操作。为了理解我对代码做了什么，请尝试使用 offset、push 和 pull classes.
2.b 为了在列堆叠时有轻微的间隙，我包含了一个媒体查询并设置了 CSS 规则以删除父列上的默认填充。
2.c 为了在列堆叠时有边框，我为给定的媒体查询添加了 CSS 边框规则。
我会将包含的样式移动到名为 "css" 的文件夹中，并将它们全部放在那里，而不是将它们放在 html 文档中。
请务必在头部找到 HTML5 填充程序和 Respond.js 以支持 IE8，如果您希望它与 IE 一起使用，这很重要。
我还 强烈建议您先阅读一些 Bootstrap 教程 ，然后再继续使用它。看着你的错误，我觉得你还没有理解它背后的概念。不丢人，我也不丢人，而且有很多人刚刚开始学习这个框架。
这并不难，几天就可以轻松学会，至少是最基础的，相信我，这是非常值得的。时间投资得当，因为如果您继续您的投资组合，您将来肯定会遇到此类问题和其他问题。
这是您更正后的 i.m.o。工作 html 和 css.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<Title>HorrorNerd</Title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HorrorNerd's Stylesheet -->
<link href = "css/styles.css" rel ="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<style type="text/css">
/* add styles to all column classes to make the grid visible and better to understand it */
/* remove this bit of css for production/the live site obviously */
/* ============================================================= */
[class*="col-"] {
background-color: #eeeeee;
background-clip: padding-box; /* research this, what is background-clip? what is padding-box? */
border: 0.2em solid transparent;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 3px solid #666;
}
/* ============================================================= */
/* remove this bit of css for production/the live site obviously */
/* media query for when the columns start to stack up or everything up to the col-md class */
@media screen and (max-width: 991px) {
/* remove the padding on either side of the columns for the given media query */
.middle-column {
padding: 0 !important; /* use of !important is a must to override Bootstrap's default CSS */
}
/* add the top-space to the 2nd and 3rd column for the given media query */
/* here you can choose between the values that fit you best */
/* I have used % values but of course you can use px or other units */
.top-space-sm-1 {
margin-top: 1%;
}
.top-space-sm-2 {
margin-top: 2%;
}
.top-space-sm-3 {
margin-top: 3%;
}
.top-space-sm-4 {
margin-top: 4%;
}
.top-space-sm-5 {
margin-top: 5%;
}
.top-space-sm-7 {
margin-top: 7%;
}
.top-space-sm-10 {
margin-top: 10%;
}
/* this is your wanted border for the columns on the given media query */
/* replace "green" with any colour you like */
.col-xs-border {
border: 2px solid green;
}
/* include this so you always have a vertical scrollbar */
/* this will avoid jumps of the page when being resized */
/* it is up to you and how your site will look later to keep or remove it */
html {
overflow-y: scroll;
}
}
</style>
<!-- navbar -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">HorrorNerd</a>
</div> <!-- div class="navbar-header" close -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a>
<li><a href="#about.html">About</a></li>
<li><a href="#blog.html">Blog</a></li>
<li><a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery">Artwork</a></li>
<li class="dropdown">
<a href="#" class="dropdown" data-toggle="dropdown">Social Media <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">Linkn</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</li>
<li><a href="#services.html">Services</a></li>
<li><a href="#contact" data-toggle="modal">Contact</a></li>
</ul>
</div>
</div> <!-- div class="container" close -->
</nav> <!-- nav close -->
<div class="container">
<div class="row">
<div class="col-xs-border col-xs-12 col-md-3">
<div class="info">
<h1>I'm An Artist</h1>
<p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
<a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right">Visit Gallery</a>
</div>
</div>
<!-- http://getbootstrap.com/css/#grid-offsetting -->
<div class="col-xs-border top-space-sm-4 middle-column col-xs-12 col-md-4 col-md-offset-1">
<!-- http://getbootstrap.com/css/#grid-nesting -->
<!-- http://getbootstrap.com/css/#grid-column-ordering -->
<div class="col-xs-12 col-md-10 col-md-push-1">
<div class="info">
<h1>I'm An Artist</h1>
<p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
<a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right">Visit Gallery</a>
</div>
</div>
</div>
<!-- http://getbootstrap.com/css/#grid-offsetting -->
<div class="col-xs-border top-space-sm-4 col-xs-12 col-md-3 col-md-offset-1">
<div class="info">
<h1>I'm An Artist</h1>
<p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
<a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right">Visit Gallery</a>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site by HorrorNerd.</p>
<a class="navbar-btn btn-danger btn-sml pull-right">Subscribe on Youtube</a>
</div>
</div>
<div class="modal fade" id ="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Contact HorrorNerd</h4>
</div>
<div class="modal-body">
<p>This is just a test for now.</p>
</div>
<div class="modal-footer">
<a class="btn btn-danger" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
祝你工作顺利！
如果此答案对您有所帮助，请不要忘记将其采纳为正确答案。谢谢:)