我有以下问题：当我调整窗口大小时，网格被推到左边而不是保持居中。有谁知道为什么网格被推到左边而不是在移动视图中保持居中？我想保持它的中心，我不太确定如何解决这个问题。
/*
Simple Grid
Project Page - http://thisisdallas.github.com/Simple-Grid/
Author - Dallas Bass
Site - http://dallasbass.com
*/
[class*='grid'],
[class*='col-'],
[class*='mobile-'],
.grid:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*='col-'] {
float: left;
min-height: 1px;
padding-right: 20px;
/* column-space */
}
[class*='col-'] [class*='col-']:last-child {
padding-right: 0;
}
.grid {
width: 100%;
max-width: 1140px;
min-width: 748px;
/* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */
margin: 0 auto;
overflow: hidden;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.grid-pad {
padding-top: 10px;
padding-left: 20px;
/* grid-space to left */
padding-right: 0;
/* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}
.push-right {
float: right;
}
/* Content Columns */
.col-1-1 {
width: 100%;
}
.col-2-3,
.col-8-12 {
width: 66.66%;
}
.col-1-2,
.col-6-12 {
width: 50%;
}
.col-1-3,
.col-4-12 {
width: 33.33%;
}
.col-1-4,
.col-3-12 {
width: 25%;
}
.col-1-5 {
width: 20%;
}
.col-1-6,
.col-2-12 {
width: 16.667%;
}
.col-1-7 {
width: 14.28%;
}
.col-1-8 {
width: 12.5%;
}
.col-1-9 {
width: 11.1%;
}
.col-1-10 {
width: 10%;
}
.col-1-11 {
width: 9.09%;
}
.col-1-12 {
width: 8.33%
}
/* Layout Columns */
.col-11-12 {
width: 91.66%
}
.col-10-12 {
width: 83.333%;
}
.col-9-12 {
width: 75%;
}
.col-5-12 {
width: 41.66%;
}
.col-7-12 {
width: 58.33%
}
/* Pushing blocks */
.push-2-3,
.push-8-12 {
margin-left: 66.66%;
}
.push-1-2,
.push-6-12 {
margin-left: 50%;
}
.push-1-3,
.push-4-12 {
margin-left: 33.33%;
}
.push-1-4,
.push-3-12 {
margin-left: 25%;
}
.push-1-5 {
margin-left: 20%;
}
.push-1-6,
.push-2-12 {
margin-left: 16.667%;
}
.push-1-7 {
margin-left: 14.28%;
}
.push-1-8 {
margin-left: 12.5%;
}
.push-1-9 {
margin-left: 11.1%;
}
.push-1-10 {
margin-left: 10%;
}
.push-1-11 {
margin-left: 9.09%;
}
.push-1-12 {
margin-left: 8.33%
}
@media handheld,
only screen and (max-width: 767px) {
.grid {
width: 100%;
min-width: 0;
margin-left: 0;
margin-right: 0;
padding-left: 20px;
/* grid-space to left */
padding-right: 10px;
/* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
}
[class*='col-'] {
width: auto;
float: none;
margin: 10px 0;
padding-left: 0;
padding-right: 10px;
/* column-space */
}
[class*='col-'] [class*='col-'] {
padding-right: 0;
}
/* Mobile Layout */
[class*='mobile-col-'] {
float: left;
margin: 0 0 10px;
padding-left: 0;
padding-right: 10px;
/* column-space */
padding-bottom: 0;
}
.mobile-col-1-1 {
width: 100%;
}
.mobile-col-2-3,
.mobile-col-8-12 {
width: 66.66%;
}
.mobile-col-1-2,
.mobile-col-6-12 {
width: 50%;
}
.mobile-col-1-3,
.mobile-col-4-12 {
width: 73.33%;
}
.mobile-col-1-4,
.mobile-col-3-12 {
width: 25%;
}
.mobile-col-1-5 {
width: 20%;
}
.mobile-col-1-6,
.mobile-col-2-12 {
width: 16.667%;
}
.mobile-col-1-7 {
width: 14.28%;
}
.mobile-col-1-8 {
width: 12.5%;
}
.mobile-col-1-9 {
width: 11.1%;
}
.mobile-col-1-10 {
width: 10%;
}
.mobile-col-1-11 {
width: 9.09%;
}
.mobile-col-1-12 {
width: 8.33%
}
/* Layout Columns */
.mobile-col-11-12 {
width: 91.66%
}
.mobile-col-10-12 {
width: 83.333%;
}
.mobile-col-9-12 {
width: 75%;
}
.mobile-col-5-12 {
width: 41.66%;
}
.mobile-col-7-12 {
width: 58.33%
}
.hide-on-mobile {
display: none !important;
width: 0;
height: 0;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body style="padding-top: 70px; ">
<header>
<nav class="navbar navbar-default navbar-fixed-top " role="navigation ">
<div class="container-fluid ">
<div class="navbar-header ">
<button type="button " class="navbar-toggle collapsed " data-toggle="collapse " data-target="#navbar ">
<span class="sr-only ">Toggle navigation</span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
</button>
<a class="navbar-brand " href="http:// ">
<img onload="this.style.opacity='1!important' ; " class="logo " src="img/logo.png ">
</a>
</div>
<div id="navbar " class="navbar-collapse collapse ">
<ul class="nav navbar-nav ">
<li class="navbar-left "><a href="travel.html ">TRAVEL</a>
</li>
<li class="navbar-left "><a href="portfolio.html "> PORTFOLIO </a>
</li>
<li class="navbar-left "><a href="about.html "> ABOUT </a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li class="right "> <a href="https://www.instagram.com/ "><i class="fa fa-instagram "></i></a>
<li class="right "> <a href="https://www.pinterest.com/ "><i class="fa fa-pinterest "></i></a>
<li class="right "> <a href="https://www.facebook.com/ "><i class="fa fa-facebook "></i></a>
<li class="right "> <a href="https://twitter.com/ "><i class="fa fa-twitter "></i></a>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
<!---End Header-->
<style>
.content {
background: #ffffff;
padding: 30px;
font-family: 'Nunito Sans', sans-serif;
color: #4a4a4a;
font-size: 15px;
}
</style>
<div class="grid grid-pad ">
<div class="col-1-1 ">
<img onload="this.style.opacity='1' ; " src="img/me.png " class="img-responsive center-block " alt="Reponsive image ">
</a>
</div>
</div>
</div>
<!-- Grid 1/3 -->
<div class="grid grid-pad ">
<div class="col-1-3 mobile-col-1-3 push-1-3 ">
<div class="content ">
<p style="color: #FC9F9F; font-size:20px ">+Creative.
<br>+Design minded.
<br>+Experience Driven.
<br>
</p>
<p>I am passionate about creating engaging, pixel perfect user experiences.
</p>
<br>
<p style="font-family: 'Cedarville Cursive', sans-serif; font-size:22px ">JH</p>
Contact: <a href="mailto: " style="text-decoration:none !important; text-decoration:none; color: #4a4a4a; "> email@email.com</a>
</div>
</div>
<div class="col-1-3 mobile-col-1-3 push-1-3 ">
<div class="content ">
</div>
</div>
</div>
<!-- End page content -->
<footer class="footer ">
<div class="container ">
<span>Copyright © 2017. JH. All rights reserved.</span>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
答案 0 :(得分：0)
您的代码中有许多未标记的HTML标记.. li中的navbar，以及一些不需要的结束标记，请查看验证您的HTML。
与此同时，您正在使用的网格系统（在我可能添加的引导网格系统的顶部）通过显式设置{{.push-*上的所有左边距和右边距来覆盖它在移动设备上的.mobile-col-*类。 1}}到0。它还添加了float:left属性。
您可以查看添加类似.mobile-col-centered的类，您可以使用@media handheld, only screen and (max-width: 767px)声明底部的以下内容覆盖覆盖：
.mobile-col-centered {
margin-left: auto;
margin-right: auto;
float: none;
}
<强> JSFIDDLE
注意：由于这会覆盖float属性，这可能会导致显示您有意想要彼此相邻的任何列的问题
或者，您可以利用已包含的引导网格系统，并使用.col-xs-*和.col-xs-offset-*选项以移动宽度“居中”您的列。就个人而言，我目前看不到你在这里尝试使用的网格系统有什么好处。
答案 1 :(得分：0)
您的内容实际上并没有被推到左侧，一旦达到767px（正如它设计的那样），该列就会崩溃。如果要保持列宽更小更长，可以在媒体查询中应用最大宽度规则。
您的HTML中也有很多错误，请对其进行验证。
显示列折叠的示例：
@import url("https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display|Cedarville+Cursive");
/*
Simple Grid
Project Page - http://thisisdallas.github.com/Simple-Grid/
Author - Dallas Bass
Site - http://dallasbass.com
*/
[class*='grid'],
[class*='col-'],
[class*='mobile-'],
.grid:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*='col-'] {
float: left;
min-height: 1px;
padding-right: 20px;
/* column-space */
}
[class*='col-'] [class*='col-']:last-child {
padding-right: 0;
}
.grid {
width: 100%;
max-width: 1140px;
min-width: 748px;
/* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */
margin: 0 auto;
overflow: hidden;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.grid-pad {
padding-top: 20px;
padding-left: 20px;
/* grid-space to left */
padding-right: 0;
/* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}
.push-right {
float: right;
}
/* Content Columns */
.col-1-1 {
width: 100%;
}
.col-2-3,
.col-8-12 {
width: 66.66%;
}
.col-1-2,
.col-6-12 {
width: 50%;
}
.col-1-3,
.col-4-12 {
width: 33.33%;
}
.col-1-4,
.col-3-12 {
width: 25%;
}
.col-1-5 {
width: 20%;
}
.col-1-6,
.col-2-12 {
width: 16.667%;
}
.col-1-7 {
width: 14.28%;
}
.col-1-8 {
width: 12.5%;
}
.col-1-9 {
width: 11.1%;
}
.col-1-10 {
width: 10%;
}
.col-1-11 {
width: 9.09%;
}
.col-1-12 {
width: 8.33%
}
/* Layout Columns */
.col-11-12 {
width: 91.66%
}
.col-10-12 {
width: 83.333%;
}
.col-9-12 {
width: 75%;
}
.col-5-12 {
width: 41.66%;
}
.col-7-12 {
width: 58.33%
}
/* Pushing blocks */
.push-2-3,
.push-8-12 {
margin-left: 66.66%;
}
.push-1-2,
.push-6-12 {
margin-left: 50%;
}
.push-1-3,
.push-4-12 {
margin-left: 33.33%;
}
.push-1-4,
.push-3-12 {
margin-left: 25%;
}
.push-1-5 {
margin-left: 20%;
}
.push-1-6,
.push-2-12 {
margin-left: 16.667%;
}
.push-1-7 {
margin-left: 14.28%;
}
.push-1-8 {
margin-left: 12.5%;
}
.push-1-9 {
margin-left: 11.1%;
}
.push-1-10 {
margin-left: 10%;
}
.push-1-11 {
margin-left: 9.09%;
}
.push-1-12 {
margin-left: 8.33%
}
@media handheld,
only screen and (max-width: 767px) {
.grid {
width: 100%;
min-width: 0;
margin-left: 0;
margin-right: 0;
padding-left: 20px;
/* grid-space to left */
padding-right: 10px;
/* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
}
[class*='col-'] {
width: auto;
float: none;
margin: 10px 0;
padding-left: 0;
padding-right: 10px;
/* column-space */
}
[class*='col-'] [class*='col-'] {
padding-right: 0;
}
/* Mobile Layout */
[class*='mobile-col-'] {
float: left;
margin: 0 0 10px;
padding-left: 0;
padding-right: 10px;
/* column-space */
padding-bottom: 0;
}
.mobile-col-1-1 {
width: 100%;
}
.mobile-col-2-3,
.mobile-col-8-12 {
width: 66.66%;
}
.mobile-col-1-2,
.mobile-col-6-12 {
width: 50%;
}
.mobile-col-1-3,
.mobile-col-4-12 {
width: 33.33%;
}
.mobile-col-1-4,
.mobile-col-3-12 {
width: 25%;
}
.mobile-col-1-5 {
width: 20%;
}
.mobile-col-1-6,
.mobile-col-2-12 {
width: 16.667%;
}
.mobile-col-1-7 {
width: 14.28%;
}
.mobile-col-1-8 {
width: 12.5%;
}
.mobile-col-1-9 {
width: 11.1%;
}
.mobile-col-1-10 {
width: 10%;
}
.mobile-col-1-11 {
width: 9.09%;
}
.mobile-col-1-12 {
width: 8.33%
}
/* Layout Columns */
.mobile-col-11-12 {
width: 91.66%
}
.mobile-col-10-12 {
width: 83.333%;
}
.mobile-col-9-12 {
width: 75%;
}
.mobile-col-5-12 {
width: 41.66%;
}
.mobile-col-7-12 {
width: 58.33%
}
.hide-on-mobile {
display: none !important;
width: 0;
height: 0;
}
}
body {
padding-top: 50px;
}
.content a {
text-decoration: none;
color: #4a4a4a;
}
.content a:hover {
text-decoration: none;
color: #FC9F9F;
}
.content {
background-color: #fafafa;
padding: 30px;
font-family: 'Nunito Sans', sans-serif;
color: #4a4a4a;
font-size: 15px;
}
.skills {
color: #FC9F9F;
font-size: 20px;
margin-bottom: 5px;
}
.sig {
font-family: 'Cedarville Cursive', sans-serif;
font-size: 22px;
margin: 10px 0;
}
.footer {
color: #4a4a4a;
background-color: #fafafa;
padding: 30px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img onload="this.style.opacity='1!important';" class="logo" src="http://placehold.it/20x20/FC9F9F/FC9F9F">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"><a href="travel.html">TRAVEL</a>
</li>
<li class="navbar-left"><a href="portfolio.html"> PORTFOLIO </a>
</li>
<li class="navbar-left"><a href="about.html"> ABOUT </a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <a href="https://www.instagram.com/pixelsbyjen"><i class="fa fa-instagram"></i></a>
</li>
<li class="right"> <a href="https://www.pinterest.com/"><i class="fa fa-pinterest"></i></a>
</li>
<li class="right"> <a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
</li>
<li class="right"> <a href="https://twitter.com/"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="grid grid-pad">
<div class="col-1-1">
<img onload="this.style.opacity='1';" src="http://placehold.it/1920x750/FC9F9F/000" class="img-responsive center-block" alt="Reponsive image">
</div>
</div>
<div class="grid grid-pad">
<div class="col-1-2 push-1-4">
<div class="content">
<div class="skills">+Creative.</div>
<div class="skills">+Design minded.</div>
<div class="skills">+Experience Driven.</div>
<p>I am passionate about creating engaging, pixel perfect user experiences.</p>
<div class="sig">JH</div>
<span>Contact: <a href="mailto:"> email@email.com</a></span>
</div>
</div>
<div class="col-1-2 push-1-4">
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
</div>
<div class="grid grid-pad">
<div class="col-1-1">
<footer class="footer">
<span>Copyright © 2017. JH. All rights reserved.</span>
</footer>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
最大宽度示例：
@import url("https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display|Cedarville+Cursive");
/*
Simple Grid
Project Page - http://thisisdallas.github.com/Simple-Grid/
Author - Dallas Bass
Site - http://dallasbass.com
*/
[class*='grid'],
[class*='col-'],
[class*='mobile-'],
.grid:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*='col-'] {
float: left;
min-height: 1px;
padding-right: 20px;
/* column-space */
}
[class*='col-'] [class*='col-']:last-child {
padding-right: 0;
}
.grid {
width: 100%;
max-width: 1140px;
min-width: 748px;
/* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */
margin: 0 auto;
overflow: hidden;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.grid-pad {
padding-top: 20px;
padding-left: 20px;
/* grid-space to left */
padding-right: 0;
/* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}
.push-right {
float: right;
}
/* Content Columns */
.col-1-1 {
width: 100%;
}
.col-2-3,
.col-8-12 {
width: 66.66%;
}
.col-1-2,
.col-6-12 {
width: 50%;
}
.col-1-3,
.col-4-12 {
width: 33.33%;
}
.col-1-4,
.col-3-12 {
width: 25%;
}
.col-1-5 {
width: 20%;
}
.col-1-6,
.col-2-12 {
width: 16.667%;
}
.col-1-7 {
width: 14.28%;
}
.col-1-8 {
width: 12.5%;
}
.col-1-9 {
width: 11.1%;
}
.col-1-10 {
width: 10%;
}
.col-1-11 {
width: 9.09%;
}
.col-1-12 {
width: 8.33%
}
/* Layout Columns */
.col-11-12 {
width: 91.66%
}
.col-10-12 {
width: 83.333%;
}
.col-9-12 {
width: 75%;
}
.col-5-12 {
width: 41.66%;
}
.col-7-12 {
width: 58.33%
}
/* Pushing blocks */
.push-2-3,
.push-8-12 {
margin-left: 66.66%;
}
.push-1-2,
.push-6-12 {
margin-left: 50%;
}
.push-1-3,
.push-4-12 {
margin-left: 33.33%;
}
.push-1-4,
.push-3-12 {
margin-left: 25%;
}
.push-1-5 {
margin-left: 20%;
}
.push-1-6,
.push-2-12 {
margin-left: 16.667%;
}
.push-1-7 {
margin-left: 14.28%;
}
.push-1-8 {
margin-left: 12.5%;
}
.push-1-9 {
margin-left: 11.1%;
}
.push-1-10 {
margin-left: 10%;
}
.push-1-11 {
margin-left: 9.09%;
}
.push-1-12 {
margin-left: 8.33%
}
@media handheld,
only screen and (max-width: 767px) {
.grid {
width: 100%;
min-width: 0;
margin-left: 0;
margin-right: 0;
padding-left: 20px;
/* grid-space to left */
padding-right: 10px;
/* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
}
[class*='col-'] {
width: auto;
float: none;
margin: 10px 0;
padding-left: 0;
padding-right: 10px;
/* column-space */
}
[class*='col-'] [class*='col-'] {
padding-right: 0;
}
/* Mobile Layout */
[class*='mobile-col-'] {
float: left;
margin: 0 0 10px;
padding-left: 0;
padding-right: 10px;
/* column-space */
padding-bottom: 0;
}
.mobile-col-1-1 {
width: 100%;
}
.mobile-col-2-3,
.mobile-col-8-12 {
width: 66.66%;
}
.mobile-col-1-2,
.mobile-col-6-12 {
width: 50%;
}
.mobile-col-1-3,
.mobile-col-4-12 {
width: 33.33%;
}
.mobile-col-1-4,
.mobile-col-3-12 {
width: 25%;
}
.mobile-col-1-5 {
width: 20%;
}
.mobile-col-1-6,
.mobile-col-2-12 {
width: 16.667%;
}
.mobile-col-1-7 {
width: 14.28%;
}
.mobile-col-1-8 {
width: 12.5%;
}
.mobile-col-1-9 {
width: 11.1%;
}
.mobile-col-1-10 {
width: 10%;
}
.mobile-col-1-11 {
width: 9.09%;
}
.mobile-col-1-12 {
width: 8.33%
}
/* Layout Columns */
.mobile-col-11-12 {
width: 91.66%
}
.mobile-col-10-12 {
width: 83.333%;
}
.mobile-col-9-12 {
width: 75%;
}
.mobile-col-5-12 {
width: 41.66%;
}
.mobile-col-7-12 {
width: 58.33%
}
.hide-on-mobile {
display: none !important;
width: 0;
height: 0;
}
}
body {
padding-top: 50px;
}
.content a {
text-decoration: none;
color: #4a4a4a;
}
.content a:hover {
text-decoration: none;
color: #FC9F9F;
}
.content {
background-color: #fafafa;
padding: 30px;
font-family: 'Nunito Sans', sans-serif;
color: #4a4a4a;
font-size: 15px;
}
.skills {
color: #FC9F9F;
font-size: 20px;
margin-bottom: 5px;
}
.sig {
font-family: 'Cedarville Cursive', sans-serif;
font-size: 22px;
margin: 10px 0;
}
.footer {
color: #4a4a4a;
background-color: #fafafa;
padding: 30px;
}
@media only screen and (max-width: 767px) {
.content {
max-width: 400px;
margin: auto;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img onload="this.style.opacity='1!important';" class="logo" src="http://placehold.it/20x20/FC9F9F/FC9F9F">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"><a href="travel.html">TRAVEL</a>
</li>
<li class="navbar-left"><a href="portfolio.html"> PORTFOLIO </a>
</li>
<li class="navbar-left"><a href="about.html"> ABOUT </a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <a href="https://www.instagram.com/pixelsbyjen"><i class="fa fa-instagram"></i></a>
</li>
<li class="right"> <a href="https://www.pinterest.com/"><i class="fa fa-pinterest"></i></a>
</li>
<li class="right"> <a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
</li>
<li class="right"> <a href="https://twitter.com/"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="grid grid-pad">
<div class="col-1-1">
<img onload="this.style.opacity='1';" src="http://placehold.it/1920x750/FC9F9F/000" class="img-responsive center-block" alt="Reponsive image">
</div>
</div>
<div class="grid grid-pad">
<div class="col-1-2 push-1-4">
<div class="content">
<div class="skills">+Creative.</div>
<div class="skills">+Design minded.</div>
<div class="skills">+Experience Driven.</div>
<p>I am passionate about creating engaging, pixel perfect user experiences.</p>
<div class="sig">JH</div>
<span>Contact: <a href="mailto:"> email@email.com</a></span>
</div>
</div>
<div class="col-1-2 push-1-4">
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
</div>
<div class="grid grid-pad">
<div class="col-1-1">
<footer class="footer">
<span>Copyright © 2017. JH. All rights reserved.</span>
</footer>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>