2项行不会居中，也不会按预期行事

时间：2016-08-29 02:00:59

标签： html css twitter-bootstrap-3

好吧，所以我有这个投资组合页面，我正在努力，由于某种原因，列被卡在左边，自动上的边距不起作用，浮动：没有不起作用。我几乎尝试过任何东西。任何人都知道如何解决这个问题？

有问题的网站： https://jsfiddle.net/p3jgjnbr/ 

.Logo {
  font-size: 20px;
  color: white;
  font-family: Monospace;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.Intro-Nav {
  margin-bottom: 50px;
}
#Logo:hover {
  font-size: 20px;
  color: green;
  font-family: Monospace;
  background-color: white;
  border-color: white;
  border-bottom: solid green;
}
#Navlist li {
  -moz-transition: all ease 0.2s -o-transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  transition: all ease 0.2s;
  font-family: Monospace;
  font-size: 20px;
}
#Navlist li:hover {
  background-color: green;
  font-family: Monospace;
  border-bottom: solid white;
}
.slight-round {
  border-radius: 10px;
}
.Anon {
  width: 400px;
  border-radius: 200px;
}
#ImgWrap {
  padding-top: 50px;
}
.About {
  padding-left: 20px;
  padding-bottom: 30px;
  background-color: white;
  margin-top: 60px;
  border-left: thick solid #ff0000;
  font-family: Monospace;
  font-size: ?px;
}
#Portfolio {
  padding-top: 50px;
}
.Projects {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#row1 div p {
  max-width: 306px;
  background-color: lightgrey;
  border-color: lightgrey;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-left: 5px;
}
#row2 div p {
  max-width: 306px;
  background-color: lightgrey;
  border-color: lightgrey;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-left: 5px;
}
#row3 div p {
  max-width: 306px;
  background-color: lightgrey;
  border-color: lightgrey;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-left: 5px;
}
#row1 div img {
  border: lightgrey solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#row2 div img {
  border: lightgrey solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#row3 div img {
  border: lightgrey solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#Me {
  padding-bottom: 20px;
  padding-top: 50px;
}
.Background1 {
  background: url("https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg") center center fixed;
  background-size: cover;
  height: 700px;
  text-align: center;
  padding-bottom: 50px;
}
.Background2 {
  background: url("http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2015/12/Wind-Turbine-at-Sunset.jpg") center center fixed;
  height: ?px;
  text-align: center;
  padding-bottom: 50px;
}
.SocialMedia {
  background-color: lightgrey;
}
.SocialButtons {
  padding: 30px 30px;
  padding-bottom: 100px;
}
.Head1 {
  display: table;
  margin: 0 auto;
}
.Head1 p {
  font-family: Monospace;
  font-size: 25px;
  padding: 0px 0px;
  margin: 0px 0px;
}
.btn-circle.btn-xl {
  background-position: center;
  position: relative;
  width: 100px;
  height: 100px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 65px;
  -moz-transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.btn-circle.btn-xl:hover {
  width: 155px;
  height: 100px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}
.btn-circle.btn-xl:hover .btnDes {
  visibility: visible;
  opacity: 1;
}
.btnDes {
  position: absolute;
  padding-top: 45px;
  font-size: 20px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.btnWrap:hover .btnDes {
  visibility: visible;
  opacity: 1;
}
.SocialMed {
  border-bottom: solid black;
}
.CntMeBtn {
  font-size: 1.7em;
}
<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.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="Background1 container-fluid">
    <div class="container-fluid">
      <div class="navbar navbar-inverse navbar-fixed-top Intro-Nav">
        <div class="container">
          <a href="#" class="navbar-brand Logo" id="Logo">
        StruckCroissant
      </a>
          <button class="navbar-toggle slight-round" type="button" 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" id="Navlist">
              <li><a href="#Me">About Me</a>
              </li>
              <li><a href="#Portfolio">Portfolio</a>
              </li>
              <li><a href="#Contact">Contact Me</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="container-fluid" id="Me">
        <div class="row" id="AbtRow1">
          <div class="col-md-12 col-sm-12" id="ImgWrap">
            <img src="http://67.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_540.png" class="Anon">
            <p class="anon"></p>
          </div>
        </div>
        <div class="row" id="AbtRow2">
          <div class="col-md-12 col-sm-12">
            <p class="About">
              Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
              Blah Blah Blah</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="Background2" id="Portfolio">
    <div class="container-fluid">
      <div class="row row-centered" id="row1">
        <div class="col-md-6 col-centered">
          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>Go ahead and guess what this picture is...Thats right! A filler!</p>
        </div>
        <div class="col-md-6 col-centered">
          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>Being a filler is hard sometimes, but, at least im not looking at one...Oh wait!</p>
        </div>
      </div>
      <div class="row row-centered" id="row2">
        <div class="col-md-6 col-centered">
          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>Go ahead and guess what this picture is...Thats right! A filler!</p>
        </div>
        <div class="col-md-6 col-centered">
          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>Being a filler is hard sometimes, but, at least im not looking at one...Oh wait!</p>

        </div>
      </div>
      <div class="row row-centered" id="row3">
        <div class="col-md-6 col-centered">

          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>If you make it to the end of these fillers i might just give you a treat!</p>

        </div>
        <div class="col-md-6 col-centered">
          <div class="Portfolio-content">
            <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
            <p>I looked in the cupboards but alas, the treats were nowhere to be found</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="SocialMedia" id="Contact">
    <div class="row">
      <div class="col-md-12 SocialMed">
        <div class="Head1">
          <p>Contact Me</p>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row row-centered SocialButtons">
        <div class="col-md-3 col-sm-3">
          <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-facebook fa-fw Fb CntMeBtn"></i><p class="btnDes">Facebook</p></a>

        </div>
        <div class="col-md-3 col-sm-3">

          <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl Fire"><i class="fa fa-fire fa-fw Fb CntMeBtn"></i><p class="btnDes">FreeCodeCamp</p></a>

        </div>
        <div class="col-md-3 col-sm-3">

          <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-linkedin fa-fw Fb CntMeBtn"></i><p class="btnDes">LinkedIn</p></a>

        </div>
        <div class="col-md-3 col-sm-3">

          <a href="https://github.com/StruckCroissant" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-github fa-fw Fb CntMeBtn"></i><p class="btnDes">Github</p></a>

        </div>
      </div>
    </div>
  </div>
</body>

因为您可以清楚地看到所有占位符图片和社交媒体按钮都保持对齐，我感谢您的每一点帮助。谢谢！

2 个答案:

答案 0 :(得分：0)

试试这个

＆＃13;
＆＃13; 
.Logo {
  font-size: 20px;
  color: white;
  font-family: Monospace;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.Intro-Nav {
  margin-bottom: 50px;
}
#Logo:hover {
  font-size: 20px;
  color: green;
  font-family: Monospace;
  background-color: white;
  border-color: white;
  border-bottom: solid green;
}
#Navlist li {
  -moz-transition: all ease 0.2s -o-transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  transition: all ease 0.2s;
  font-family: Monospace;
  font-size: 20px;
}
#Navlist li:hover {
  background-color: green;
  font-family: Monospace;
  border-bottom: solid white;
}
.slight-round {
  border-radius: 10px;
}
.Anon {
  width: 400px;
  border-radius: 200px;
}
#ImgWrap {
  padding-top: 50px;
}
.About {
  padding-left: 20px;
  padding-bottom: 30px;
  background-color: white;
  margin-top: 60px;
  border-left: thick solid #ff0000;
  font-family: Monospace;
  font-size: ?px;
}
#Portfolio {
  padding-top: 50px;
}
.Projects {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#row1 div p {
  max-width: 306px;
  background-color: lightgrey;
  border-color: lightgrey;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-left: 5px;
  margin: 0 auto;
}
#row2 div p {
  max-width: 306px;
  background-color: lightgrey;
  border-color: lightgrey;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-left: 5px;
  margin: 0 auto;
}
#row3 div p {
  max-width: 306px;
  background-color: lightgrey;
  border-color: lightgrey;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-left: 5px;
  margin: 0 auto;
}
#row1 div img {
  border: lightgrey solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 0 auto;
}
#row2 div img {
  border: lightgrey solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 0 auto;
}
#row3 div img {
  border: lightgrey solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 0 auto;
}
#Me {
  padding-bottom: 20px;
  padding-top: 50px;
}
.Background1 {
  background: url("https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg") center center fixed;
  background-size: cover;
  height: 700px;
  text-align: center;
  padding-bottom: 50px;
}
.Background2 {
  background: url("http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2015/12/Wind-Turbine-at-Sunset.jpg") center center fixed;
  height: ?px;
  text-align: center;
  padding-bottom: 50px;
}
.SocialMedia {
  background-color: lightgrey;
}
.SocialButtons {
  padding: 30px 30px;
  padding-bottom: 100px;
}
.Head1 {
  display: table;
  margin: 0 auto;
}
.Head1 p {
  font-family: Monospace;
  font-size: 25px;
  padding: 0px 0px;
  margin: 0px 0px;
}
.btn-circle.btn-xl {
  background-position: center;
  position: relative;
  width: 100px;
  height: 100px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 65px;
  -moz-transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.btn-circle.btn-xl:hover {
  width: 155px;
  height: 100px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}
.btn-circle.btn-xl:hover .btnDes {
  visibility: visible;
  opacity: 1;
}
.btnDes {
  position: absolute;
  padding-top: 45px;
  font-size: 20px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.btnWrap:hover .btnDes {
  visibility: visible;
  opacity: 1;
}
.SocialMed {
  border-bottom: solid black;
}
.CntMeBtn {
  font-size: 1.7em;
}

.row-centered{
  margin: 0 auto !important;
}
＆＃13; 
<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.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="Background1 container-fluid">
    <div class="container-fluid">
      <div class="navbar navbar-inverse navbar-fixed-top Intro-Nav">
        <div class="container">
          <a href="#" class="navbar-brand Logo" id="Logo">
        StruckCroissant
      </a>
          <button class="navbar-toggle slight-round" type="button" 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" id="Navlist">
              <li><a href="#Me">About Me</a>
              </li>
              <li><a href="#Portfolio">Portfolio</a>
              </li>
              <li><a href="#Contact">Contact Me</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="container-fluid" id="Me">
        <div class="row" id="AbtRow1">
          <div class="col-md-12 col-sm-12" id="ImgWrap">
            <img src="http://67.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_540.png" class="Anon">
            <p class="anon"></p>
          </div>
        </div>
        <div class="row" id="AbtRow2">
          <div class="col-md-12 col-sm-12">
            <p class="About">
              Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
              Blah Blah Blah</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="Background2" id="Portfolio">
    <div class="container-fluid">
      <div class="row row-centered" id="row1">
        <div class="col-md-6 col-centered">
          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>Go ahead and guess what this picture is...Thats right! A filler!</p>
        </div>
        <div class="col-md-6 col-centered">
          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>Being a filler is hard sometimes, but, at least im not looking at one...Oh wait!</p>
        </div>
      </div>
      <div class="row row-centered" id="row2">
        <div class="col-md-6 col-centered">
          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>Go ahead and guess what this picture is...Thats right! A filler!</p>
        </div>
        <div class="col-md-6 col-centered">
          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>Being a filler is hard sometimes, but, at least im not looking at one...Oh wait!</p>

        </div>
      </div>
      <div class="row row-centered" id="row3">
        <div class="col-md-6 col-centered">

          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>If you make it to the end of these fillers i might just give you a treat!</p>

        </div>
        <div class="col-md-6 col-centered">
          <div class="Portfolio-content">
            <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
            <p>I looked in the cupboards but alas, the treats were nowhere to be found</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="SocialMedia" id="Contact">
    <div class="row row-centered">
      <div class="col-md-12 SocialMed">
        <div class="Head1">
          <p>Contact Me</p>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row row-centered SocialButtons">
        <div class="col-md-3 col-sm-3 text-center">
          <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-facebook fa-fw Fb CntMeBtn"></i><p class="btnDes">Facebook</p></a>

        </div>
        <div class="col-md-3 col-sm-3 text-center">

          <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl Fire"><i class="fa fa-fire fa-fw Fb CntMeBtn"></i><p class="btnDes">FreeCodeCamp</p></a>

        </div>
        <div class="col-md-3 col-sm-3 text-center">

          <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-linkedin fa-fw Fb CntMeBtn"></i><p class="btnDes">LinkedIn</p></a>

        </div>
        <div class="col-md-3 col-sm-3 text-center">

          <a href="https://github.com/StruckCroissant" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-github fa-fw Fb CntMeBtn"></i><p class="btnDes">Github</p></a>

        </div>
      </div>
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

.Logo {
  font-size: 20px;
  color: white;
  font-family: Monospace;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.Intro-Nav {
  margin-bottom: 50px;
}
#Logo:hover {
  font-size: 20px;
  color: green;
  font-family: Monospace;
  background-color: white;
  border-color: white;
  border-bottom: solid green;
}
#Navlist li {
  -moz-transition: all ease 0.2s -o-transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  transition: all ease 0.2s;
  font-family: Monospace;
  font-size: 20px;
}
#Navlist li:hover {
  background-color: green;
  font-family: Monospace;
  border-bottom: solid white;
}
.slight-round {
  border-radius: 10px;
}
.Anon {
  width: 400px;
  border-radius: 200px;
}
#ImgWrap {
  padding-top: 50px;
}
.About {
  padding-left: 20px;
  padding-bottom: 30px;
  background-color: white;
  margin-top: 60px;
  border-left: thick solid #ff0000;
  font-family: Monospace;
  font-size: ?px;
}
#Portfolio {
  padding-top: 50px;
}
.Projects {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#row1 div p {
  max-width: 306px;
  background-color: lightgrey;
  border-color: lightgrey;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-left: 5px;
  margin: 0 auto;
}
#row2 div p {
  max-width: 306px;
  background-color: lightgrey;
  border-color: lightgrey;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-left: 5px;
  margin: 0 auto;
}
#row3 div p {
  max-width: 306px;
  background-color: lightgrey;
  border-color: lightgrey;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-left: 5px;
  margin: 0 auto;
}
#row1 div img {
  border: lightgrey solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 0 auto;
}
#row2 div img {
  border: lightgrey solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 0 auto;
}
#row3 div img {
  border: lightgrey solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 0 auto;
}
#Me {
  padding-bottom: 20px;
  padding-top: 50px;
}
.Background1 {
  background: url("https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg") center center fixed;
  background-size: cover;
  height: 700px;
  text-align: center;
  padding-bottom: 50px;
}
.Background2 {
  background: url("http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2015/12/Wind-Turbine-at-Sunset.jpg") center center fixed;
  height: ?px;
  text-align: center;
  padding-bottom: 50px;
}
.SocialMedia {
  background-color: lightgrey;
}
.SocialButtons {
  padding: 30px 30px;
  padding-bottom: 100px;
}
.Head1 {
  display: table;
  margin: 0 auto;
}
.Head1 p {
  font-family: Monospace;
  font-size: 25px;
  padding: 0px 0px;
  margin: 0px 0px;
}
.btn-circle.btn-xl {
  background-position: center;
  position: relative;
  width: 100px;
  height: 100px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 65px;
  -moz-transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.btn-circle.btn-xl:hover {
  width: 165px;
  height: 100px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}
.btn-circle.btn-xl:hover .btnDes {
  visibility: visible;
  opacity: 1;
}
.btnDes {
  position: absolute;
  padding-top: 45px;
  font-size: 20px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.btnWrap:hover .btnDes {
  visibility: visible;
  opacity: 1;
}
.SocialMed {
  border-bottom: solid black;
}
.CntMeBtn {
  font-size: 1.7em;
}

.row-centered{
  margin: 0 auto !important;
}
<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.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="Background1 container-fluid">
    <div class="container-fluid">
      <div class="navbar navbar-inverse navbar-fixed-top Intro-Nav">
        <div class="container">
          <a href="#" class="navbar-brand Logo" id="Logo">
        StruckCroissant
      </a>
          <button class="navbar-toggle slight-round" type="button" 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" id="Navlist">
              <li><a href="#Me">About Me</a>
              </li>
              <li><a href="#Portfolio">Portfolio</a>
              </li>
              <li><a href="#Contact">Contact Me</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="container-fluid" id="Me">
        <div class="row" id="AbtRow1">
          <div class="col-md-12 col-sm-12" id="ImgWrap">
            <img src="http://67.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_540.png" class="Anon">
            <p class="anon"></p>
          </div>
        </div>
        <div class="row" id="AbtRow2">
          <div class="col-md-12 col-sm-12">
            <p class="About">
              Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
              Blah Blah Blah</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="Background2" id="Portfolio">
    <div class="container-fluid">
      <div class="row row-centered" id="row1">
        <div class="col-md-6 col-centered">
          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>Go ahead and guess what this picture is...Thats right! A filler!</p>
        </div>
        <div class="col-md-6 col-centered">
          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>Being a filler is hard sometimes, but, at least im not looking at one...Oh wait!</p>
        </div>
      </div>
      <div class="row row-centered" id="row2">
        <div class="col-md-6 col-centered">
          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>Go ahead and guess what this picture is...Thats right! A filler!</p>
        </div>
        <div class="col-md-6 col-centered">
          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>Being a filler is hard sometimes, but, at least im not looking at one...Oh wait!</p>

        </div>
      </div>
      <div class="row row-centered" id="row3">
        <div class="col-md-6 col-centered">

          <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
          <p>If you make it to the end of these fillers i might just give you a treat!</p>

        </div>
        <div class="col-md-6 col-centered">
          <div class="Portfolio-content">
            <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
            <p>I looked in the cupboards but alas, the treats were nowhere to be found</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="SocialMedia" id="Contact">
    <div class="row row-centered">
      <div class="col-md-12 SocialMed">
        <div class="Head1">
          <p>Contact Me</p>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row row-centered SocialButtons">
        <div class="col-md-3 col-sm-3 text-center">
          <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-facebook fa-fw Fb CntMeBtn"></i><p class="btnDes">Facebook</p></a>

        </div>
        <div class="col-md-3 col-sm-3 text-center">

          <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl Fire"><i class="fa fa-fire fa-fw Fb CntMeBtn"></i><p class="btnDes">FreeCodeCamp</p></a>

        </div>
        <div class="col-md-3 col-sm-3 text-center">

          <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-linkedin fa-fw Fb CntMeBtn"></i><p class="btnDes">LinkedIn</p></a>

        </div>
        <div class="col-md-3 col-sm-3 text-center">

          <a href="https://github.com/StruckCroissant" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-github fa-fw Fb CntMeBtn"></i><p class="btnDes">Github</p></a>

        </div>
      </div>
    </div>
  </div>
</body>

相关问题
最新问题