-1
我正試圖完成我的投資組合頁面。有一個問題得到頂部/底部填充間距在24「和13」保持不變。正如你從下面的圖片中可以看到的那樣，24英寸目前看起來是我想要的，所有的元素都在右側直接在中間，當它變成13「時，間距關閉，元素不是居中。我該如何解決？如何獲得頂部/底部間距以響應？
24" - http://i988.photobucket.com/albums/af6/jtbitt/jay-portfolio-24-inch-spacing_zpsenaqpzp4.png
13" - http://i988.photobucket.com/albums/af6/jtbitt/jay-portfolio-13-inch-spacing_zps45ygidew.png
HTML頭版 -
<body ng-app="jayPortfolio">
<!-- NAVBAR -->
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">JAY BITTNER</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/">ABOUT</a></li>
<li><a href="/portfolio">PORTFOLIO</a></li>
<li><a href="/experience">EXPERIENCE</a></li>
<li><a href="/contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- LOAD OTHER PAGES HERE -->
<main>
<div id='ng-view' ng-view></div>
</main>
</body>
HTML頭版局部 -
<section id="about" ng-controller="aboutController">
<div class="container-fluid">
<div class="row">
<div class="about-left col-lg-6 col-md-6 col-sm-12 col-xs-12">
</div>
<div class="about-right col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="about-content">
<div class="about-content-title">
<h1><strong>I'M JAY.</strong></h1>
</div>
<br />
<div class="about-content-info" ng-model="about.firstParagraph">
<p ng-if="about.firstParagraph"><strong>An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging is boring, and makes me yawn. Anything that is seemingly impossible interests me a lot. I'm ready to get to work.</strong></p>
<p ng-if="!about.firstParagraph"><strong>Currently seeking a Javascript position, using the MEAN stack, in New York City. Being innovative, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching ridiculous levels of success, not just modest realistic ones. I love working with a solid team.</strong></p>
</div>
<br />
<div class="about-button">
<button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()"><strong>MORE =></strong></button>
<button ng-if="!about.firstParagraph" class="label label-success"><a href="/portfolio"><strong>VIEW PORTFOLIO</strong></a>
</div>
<br />
<div class="about-personal-info">
<h4><strong>Email: [email protected]</strong></h4>
<br />
<div class="about-icon" ng-repeat="profile in about.profiles">
<a href="{{ profile.url }}"><img src="{{ profile.icon }}" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS -
#about {
height: 100%;
width: 100%;
background-image: -webkit-gradient(linear,left top,right bottom,color-stop(0.12, #061419),
color-stop(0.61, #36875F)
);
background-repeat: no-repeat;
}
#about .container-fluid, #about .container-fluid .row {
height: 100%;
width: 100%;
}
.about-left {
height: 100%;
background-image: url('../../images/jay-ocean.jpg');
background-repeat: no-repeat;
background-position: 0 100%;
border-right: 3px solid black;
}
.about-right {
width: 50%;
height: 100%;
}
.about-content {
width: 50%;
height: 100%;
margin: 0 auto;
padding-top: 20%;
padding-left: 5%;
text-align: center;
}
.about-content-title h1{
font-size: 3.4vw;
}
.about-content-info p {
font-size: 1vw;
word-spacing: 0.3vw;
}
.about-button button {
color: gray;
border: 1px solid black;
background-color: black;
}
.about-button a {
color: gray;
}
.about-personal-info h4 {
font-size: 1vw;
word-spacing: 0.3vw;
}
.about-icon {
display: inline;
word-spacing: 0.3vw;
}
.about-icon img {
width: 30px;
height: 30px;
border-radius: 10px;
border: 1px solid black;
}
您可以在HTML中包含標題/導航部分嗎？ – ProDexorite
當然。現在就補充一點。 – jtbitt