调整大小时元素移动（文本/图像）答案

【问题标题】：Elements move when resizing (text/images)调整大小时元素移动（文本/图像）
【发布时间】：2017-03-09 02:22:34
【问题描述】：

好的，这就是交易。如果您转到上面提供的链接，您会发现一切正常。元素，文本和图像均布局均匀。

但是当我调整窗口大小时，它们会跳出位置。我正在使用引导程序，所以我认为如果我定义了列，它将根据屏幕大小进行调整并适应。我在这里做错了什么？是媒体查询的问题吗？

jQuery(document).ready(function($){
$('a').click(function(){	
var hashindex = $(this).attr("href").indexOf('#');
var hreflen = $(this).attr("href").length;
var anchortag = $(this).attr("href").substr(hashindex, hreflen);
$('html, body').animate({
scrollTop: $( anchortag ).offset().top -100
}, 1200);
return false;
});
});


 $(document).ready(function() {
      $('.progress .progress-bar').css("width",
                function() {
                    return $(this).attr("aria-valuenow") + "%";
                }
        )
    });

@import url('https://fonts.googleapis.com/css?family=Exo+2:100,200,300,400,500,600,700,800,900');


body {
  height: 100%;
  width: 100%;
  max-width: 1440px;
}

.container-fluid {
   padding: 0px;
}

.navbar-brand {
  position: relative;
  top: -8px;
}

.navbar-nav li {
  color: #666666;
}

.nav li a:hover {
  color: black;
}

.navbar-collapse {
  margin: 0px 25px;
}

.jumbotron {
  position: relative;
  top: -95px;
  width: 100%;
  height: 120vh;
  overflow: hidden;
}

.jumbotron .container {
  position: relative;
  z-index: 2;
  color: #ffffff;
}

.jumbotron:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("http://www.incimages.com/uploaded_files/image/1940x900/software-computer-code-1940x900_35196.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-filter: blur(5px);
  filter: blur(5.5px);
  width: 100%;
}

.jumbotron .qBio {
  position: relative;
  top: 300px;
  font-size: 33px;
  font-weight: 300;
  font-family: 'Exo 2';
  z-index: 98;
}

.sub-bio {
  font-family: "Exo 2";
  font-size: 26px;
  font-weight: 100;
}

.aboutSection {
  position: relative;
  top: -75px;
}

.picMike {
  position: relative;
  border-radius: 100%;
  border: solid 3px black;
  padding: 3px;
  height: auto;
  top: -15%;
  margin: 0 auto;
}

.aboutMe {
  font-size: 50px;
  font-family: 'Exo 2';
  font-weight: 400;
  margin: 0px auto 30px auto;
  text-shadow: 4px 4px 14px rgba(150, 150,   150, 1);
  padding-bottom: 10px
}

.blurbQuote {
  position: relative;
  max-width: 50%;
  top: 20px; right: 50px;
  max-height: 100%;
}

.blurb {
  font-family: 'Exo 2';
  font-weight: 300;
  margin: 0 5%;
}

.hideMeQuote {
  position: relative;
  max-width: 50%;
  top: 20px; right: 50px;
  max-height: 100%;
}

.hideMe {
  font-family: 'Exo 2';
  font-weight: 300;
  position: relative;
  top: -10px; margin: 0 25%;
  width: 200%;
}

.skillSon {
  margin: 50px auto;
}

.skillsBar {
  font-family: 'Exo 2';
  font-weight: 300;
  padding-bottom: 50px;
}

.skill {
  font-family: 'Exo 2';
  font-weight: 200;
}

.val {
  font-family: 'Exo 2';
  font-weight: 200;
}

.progress {
  height: 40px;
  margin:  15px auto;

}
.progress .skill {
  line-height: 40px;
  padding: 0;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}
.progress .skill .val {
  float: right;
  margin: 0 20px 0 0;
}

.progress-bar {
  text-align: left;
  transition-duration: 6s;
}

.portfolio {
  margin-top: -100px;
}

.myPortfolio {
  font-family: 'Exo 2';
  font-weight: 300;
  font-size: 35px;
}

.sub-head {
  font-family: 'Exo 2';
   padding-bottom: 75px;
  font-weight: 200;
}

.port-Text {
  font-family:'Exo 2';
  font-weight: 200;
}

.thumbnail > img {
    display: block;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.portfolio {
  position: relative;
  top: 70px;
  font-weight:300;
}

.portfolio h3 {
  font-weight: 400;
}

.thumbnails {
  list-style: none;
}

.thumbnail {
  max-height: 350px;
}

.caption {
    margin-top: -20px;
}

.nowrap {
  white-space: nowrap ;
}

.thumbnails li {
    padding-bottom: 50px;
}

.myWork {
  -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.myWork:hover {
  filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
  transition-duration: .4s;
 
}

.placeHolderPic {
  filter: blur(4.4px);
  -webkit-transition-duration: 0.5s; /* Safari & Chrome */
  transition-duration: 0.5s;
}

.bott {
  padding-bottom: 50px;
}

footer {
  margin: 50px;
  padding-top: 150px;
  padding-bottom:75px;
  height: 250px;
}

.socialTags {
  margin: auto;
  max-width: 100%;
}

.footTitle {
  margin-top: -30px;
  font-family: "Exo 2";
  font-weight: 500;
  font-size: 55px;
}

footer ul {
  list-style:none;
  margin-left: 60px;
  padding-bottom: 50px;
}

footer li {
  display: inline-block;
  padding: 75px 50px 0px 50px;
}

.footText {
  font-family: 'Exo 2';
  font-weight: 300;
}

.breaker {
  padding: 0px 0px 175px 0px;
  position: relative;
  top: 25px;
  height: 1px;
  width: 40%;
  margin: 0 auto;
  border-top: 1px solid #d9d9d9;
}

.breakerOne {
  position: relative;
  top: 125px;
  height: 1px; width: 40%;
  margin: 0 auto;
  padding: 25px 0px 0px 0px;
  border-top: 1px solid #d9d9d9;
}

.finalText {
  font-weight: 200;
  font-size: 15px;
}

.socialIcons {
  -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.socialIcons:hover {
filter: drop-shadow(20px 10px 7px rgba(0,0,0,0.9));
  transition-duration: .5s;c
}

<body data-spy="scroll" data-target=".navbar" data-offset="70">

  <!-- NAVIGATION BAR -->
 
   <div class="container-fluid">
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </button>
        <span class="navbar-brand"> Michael Adamski <br> -Web Developer- </span>
      </div>
      <div class="navbar-collapse collapse pull-right text-center">
         <ul class="nav navbar-nav">
          <li> <a href="#jumboHead" class="active">Home</a> </li>
          <li> <a href="#about">About</a> </li>
          <li> <a href="#port">Portfolio</a> </li>
          <li> <a href="#contactMe">Contact</a> </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- END NAVIGATION -->
  <!-- Header -->
  <div class="jumbotron" id="jumboHead">
    <div class="container">
      <h1></h1>
      <p class="qBio text-center">Michael Adamski. Web Developer. <br> <span class="sub-bio text-center">I am an aspiring Full-Stack Web Developer with a deep interest in creative design, aesthetics and functionality. </span></p>
    </div>
  </div>
  <!-- END HEADER -->

  <!-- BODY -->


  <!-- ABOUT SECTION -->
  <div class="container aboutSection">
    <h1 class="aboutMe text-center" id="about">About Me:</h1>
    <div class="row text-center">
      <div class="col-xs-12 col-sm-6">
        <img class="picMike img-responsive float-right" src="http://s5.postimg.org/e9qc1z12f/10329698_1423434964590736_9047498845267324748_o.jpg">
      </div>
      <div class="blurbQuote col-xs-12 col-sm-6">
        <blockquote class="blurb lead text-center visible-lg" id="bio">My name is Michael Adamski and I am currently learning to become a web developer. <br><br> I will be attending Launch Academy in Boston for the Spring 2017 Cohort. <br><br>I look forward to refining my existing skills, acquiring new ones and appling myself to new and interesting projects for prospective clients. <br><br> With an extensive past in both Music and Film I feel that Web Development has all of the components needed for a creative individual like myself to succeed.
        </blockquote>
        <blockquote class="hideMe lead text-center visible-xs visible-sm visible-md">My name is Michael Adamski and I am currently learning to become a web developer. <br><br> I will be attending Launch Academy in Boston for the Spring 2017 Cohort. <br><br>I look forward to refining my existing skills, acquiring new ones and appling myself to new and interesting projects for prospective clients. <br><br> With an extensive past in both Music and Film I feel that Web Development has all of the components needed for a creative individual like myself to succeed.
      </div>
    </div>
    <div>


          <!-- END ABOUT ME SECTION -->
          <!-- SKILLS ANIMATION -->

          <div class="container skillSon">
            <div class="row">
              <h2 class="skillsBar text-center">List of Skills:</h2>

              <!-- Skill Bars -->

              <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                  <span class="skill">HTML <i class="val">90%</i></span>
                </div>
              </div>

              <div class="progress skill-bar">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                  <span class="skill">CSS<i class="val">80%</i></span>
                </div>
              </div>

              <div class="progress skill-bar">
                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
                  <span class="skill">JavaScript<i class="val">35%</i></span>
                </div>
              </div>

              <div class="progress skill-bar">
                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                  <span class="skill">Photoshop<i class="val">60%</i></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- SKILLS END -->

    <!-- PORTFOLIO SECTION -->
    <div class="portfolio container" id="port">
      <div class="row text-center">
        <h1 class="myPortfolio text-center">Portfolio Showcase</h1>
        <h4 class="sub-head text-center">The following are samples of work down through FreeCodeCamp</h4>
        <ul class="thumbnails">
          <li class="col-lg-4 col-sm-6 col-xs-12">
            <div class="thumbnail">
              <a href="http://codepen.io/mvadamski/full/QKmQAo/"><img class="myWork" src="http://s5.postimg.org/czsimx7af/Screenshot_at_Oct_15_13_16_02.png"></a>
              <div class="caption">
                <h3 class="port-Text text-center">Tribute Page</h3>
                <p class="port-Text text-center">This is a tribute page I made on CodePen</p>
                <p>
                  <a href="#" class="port-Text btn btn-primary">
                    <span class="glyphicon glyphicon-heart
" aria-hidden="true"></span> Like
                  </a>
                </p>
              </div>
            </div>
          </li>
          <li class="col-lg-4 col-sm-6 col-xs-12">
            <div class="thumbnail">
              <a href="http://codepen.io/mvadamski/full/VKxAyd/"><img class="myWork" src="http://s5.postimg.org/joz22xsmf/Screen_Shot_2016_10_15_at_1_40_47_PM.png" style="width:320px; height: 200px;"></a>
              <div class="caption">
                <h3 class="port-Text text-center">Personal Website</h3>
                <p class="port-Text text-center"><span class="nowrap">My personal portfolio Website</span></p>
                <p>
                  <a href="#" class="btn btn-primary">
                    <span class="port-Text glyphicon glyphicon-heart
" aria-hidden="true"></span> Like
                  </a>
                </p>
              </div>
            </div>
          </li>
          <li class="col-lg-4 col-sm-6 col-xs-12">
            <div class="thumbnail">
              <img class="placeHolderPic" src="http://s5.postimg.org/u98zlix47/business_q_c_320_200_2.jpg" style="width:320px; height: 200px;">
              <div class="caption">
                <h3 class="port-Text text-center">Coming Soon!</h3>
                <p class="port-Text text-center"><span class="nowrap">Stay Tuned...</span></p>
                <p>
                  <a href="#" class="btn btn-primary">
                    <span class="port-Text glyphicon glyphicon-heart
" aria-hidden="true"></span> Like
                  </a>
                </p>
              </div>
            </div>
          </li>
          <li class="bott col-lg-4 col-sm-6 col-xs-12">
            <div class="thumbnail">
              <img class="placeHolderPic" src="http://s5.postimg.org/6fpqgkt9j/200.jpg" style="width:320px; height: 200px;">
              <div class="caption">
                <h3 class="port-Text text-center">Coming Soon!</h3>
                <p class="port-Text text-center"><span class="nowrap">Stay Tuned...</span></p>
                <p>
                  <a href="#" class="btn btn-primary">
                    <span class="port-Text glyphicon glyphicon-heart
" aria-hidden="true"></span> Like
                  </a>
                </p>
              </div>
            </div>
          </li>
          <li class="bott col-lg-4 col-sm-6 col-xs-12">
            <div class="thumbnail">
              <img class="placeHolderPic" src="http://s5.postimg.org/54hz83xnr/nightlife_q_c_320_200_4.jpg" style="width:320px; height: 200px;">
              <div class="caption">
                <h3 class="port-Text text-center">Coming Soon!</h3>
                <p class="port-Text text-center"><span class="nowrap">Stay Tuned...</span></p>
                <p>
                  <a href="#" class="btn btn-primary">
                    <span class="port-Text glyphicon glyphicon-heart
" aria-hidden="true"></span> Like
                  </a>
                </p>
              </div>
            </div>
          </li>
          <li class="bott col-lg-4 col-sm-6 col-xs-12">
            <div class="thumbnail">
              <img class="placeHolderPic" src="http://s5.postimg.org/uecqv74fb/sports_q_c_320_200_8.jpg" style="width:320px; height: 200px;">
              <div class="caption">
                <h3 class="port-Text text-center">Coming Soon!</h3>
                <p class="port-Text text-center"><span class="nowrap">Stay Tuned...</span></p>
                <p>
                  <a href="#" class="btn btn-primary">
                    <span class="port-Text glyphicon glyphicon-heart
" aria-hidden="true"></span> Like
                  </a>
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- END PORTFOLIO SECTION -->

    <div class="breakerOne"></div>

    <!-- CONTACT -->

    <footer>
      <div class="footHeading">
        <h1 class="footTitle text-center" id="contactMe"> Contact Me </h1>
        <div class="container">
          <div class="col-xs-12 socialTags" id="iconPack">
            <ul>
              <li>
                <a href="https://twitter.com/mvadamski1" target="_blank"> <img class="socialIcons" src="https://cdn3.iconfinder.com/data/icons/peelicons-vol-1/50/Twitter-128.png" alt="Twitter"></a>
              </li>
              <li>
                <a href="https://github.com/MichaelA59" target="_blank"> <img class="socialIcons"  src="https://cdn0.iconfinder.com/data/icons/octicons/1024/mark-github-128.png" alt="Git Hub"></a>
              </li>
              <li>
                <a href="https://www.linkedin.com/in/michael-adamski-837bb279" target="_blank"> <img class="socialIcons" src="https://cdn1.iconfinder.com/data/icons/black-socicons/512/linkedin-128.png" alt="Linkedin"></a>
              </li>
              <li>
                <a href="https://www.freecodecamp.com/michaela59" target="_blank"> <img class="socialIcons"  src="https://cdn4.iconfinder.com/data/icons/developer-set-3/128/code-128.png" alt="Free Code Camp"></a>
              </li>
            </ul>
          </div>
        </div>
        <div class="breaker"></div>
        <div class="finalText container-fluid">
          <div class="row">
            <div class="col-lg-3 col-md-3 col-xs-12">
              <p class="footText text-center"> Email: <br><a href="mailto:mvadamski@gmail.com"> MVAdamski@gmail.com</a></p>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6">
              <p class="footText text-center">Currently accepting projects <br> free of charge</p>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-6">
              <p class="footText text-center">Written & Coded by Michael Adamski </p>
            </div>
          </div>
        </div>
</body>

【问题讨论】：

对我来说看起来不错，除了 body 上的“max-width: 1440px”，这使得 body 比我的屏幕小。元素适应屏幕大小，双列变为单列，等等。
所以我具体说的是两个部分... 第一个是我的肖像照片右侧的生物。全尺寸时，它占据一半宽度，图片占据左侧的剩余一半。当我调整大小时，它会在切换到最小尺寸的全宽之前跳开，并且社交媒体图标在底部，它们是 4 对，但在跳转到 2 和 2 之前跳转到 3 和 1，然后全部在自己的行上...

标签： html css twitter-bootstrap grid alignment

【解决方案1】：

对于您的生物文本问题，您已将块引用的宽度设置为 200%。将其设置为 100% 即可修复：

.hideMe {
  font-family: 'Exo 2';
  font-weight: 300;
  position: relative;
  top: -10px;
  margin: 0 25%;
  width: 100%;
}

用于页脚社交链接。而不是使用 ul li。删除 ul 标记并将每个链接 li 转换为分配有引导 col 类的 div 并将它们包装在一个行容器中，并按如下方式分配类。

<div class="col-xs-12 col-sm-12 socialTags" id="iconPack">
        <div class="row innerContainer">  
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <a href="https://twitter.com/mvadamski1" target="_blank"> <img class="socialIcons" src="https://cdn3.iconfinder.com/data/icons/peelicons-vol-1/50/Twitter-128.png" alt="Twitter"></a>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <a href="https://github.com/MichaelA59" target="_blank"> <img class="socialIcons"  src="https://cdn0.iconfinder.com/data/icons/octicons/1024/mark-github-128.png" alt="Git Hub"></a>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <a href="https://www.linkedin.com/in/michael-adamski-837bb279" target="_blank"> <img class="socialIcons" src="https://cdn1.iconfinder.com/data/icons/black-socicons/512/linkedin-128.png" alt="Linkedin"></a>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <a href="https://www.freecodecamp.com/michaela59" target="_blank"> <img class="socialIcons"  src="https://cdn4.iconfinder.com/data/icons/developer-set-3/128/code-128.png" alt="Free Code Camp"></a>
          </div>
        </div>
      </div>

并将页脚 ul 和页脚 li 类重命名如下：

.socialTags .innerContainer {
  margin-left: 60px;
  padding-bottom: 50px;
 }

.socialTags .innerContainer div {
  display: inline-block;
  padding: 75px 50px 0px 50px;
 }

希望这会有所帮助。

【讨论】：

谢谢，今晚我回家试试。