html - 为什么我的 Bootstrap 列在移动设备/平板电脑上堆叠不正确？

Question

我目前正在完成我的个人作品集网站，我基本上已经完成了。我网站的桌面版本运行正常，并且在我测试的所有桌面屏幕 (13"-24") 上都能完全响应。我的桌面站点的每个页面都分成两半，有 2 个 col-md-6。

但是，这种设计对于移动设备/平板电脑来说是不合逻辑的，因此我试图将我页面中的所有 col-md-6 堆叠为 col-xs-12，但它无法正常工作。事实上，它看起来很糟糕。根据我的假设，这是因为行当前对齐的方式。它们是为 col-md-6 设置的，当我放入 12 时并没有真正正常工作。考虑到这一点，如果需要根据移动设备/平板电脑或台式机进行不同的设置，我应该如何设置行？

另一个问题是关于我应该如何调整字体大小。我目前正在使用 vm 调整字体大小，这对我的桌面版本非常有用。但是，它在移动设备上会显得太小。推荐的做法是什么来弥补这个问题？

这是每个尺寸的图片。 (现在看，我看到我的 13"和 24"之间有一个小间距差异，但这是一个简单的修复。不关心那个。)

24"- http://i988.photobucket.com/albums/af6/jtbitt/24-inch-desktop-responsive_zps6mwocx8l.png

13"- http://i988.photobucket.com/albums/af6/jtbitt/13-inch-desktop-responsive_zps4rvtqo5l.png

手机/平板电脑- http://i988.photobucket.com/albums/af6/jtbitt/mobile-unresponsive_zpsjn6hu8x3.png

HTML-

<section id="about" ng-controller="aboutController">    
  <div class="container-fluid">

    <div class="row about-row">

      <div class="about-left col-md-6 col-xs-12">
      </div>

      <div class="about-right col-md-6 col-xs-12">
        <div class="row">
          <div class="about-content-title col-md-12">
            <h1><strong>I'M JAY.</strong></h1>
          </div>
        </div>

        <div class="row">
          <div class="about-content-info col-md-12">
            <p ng-if="about.firstParagraph">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.</p>

            <p ng-if="!about.firstParagraph">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.</p>
          </div>
        </div>

        <div class="row">
          <div class="about-button col-md-12">
            <button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()">MORE =></button>
            <button ng-if="!about.firstParagraph" class="label label-success"><a href="/portfolio">VIEW SKILLS</a></button>
          </div>
        </div>

        <div class="row">
          <div class="about-personal-info col-md-12">
            <h4>Email: jaybittner@gmail.com</h4>
          </div>
        </div>

        <div class="row">
          <div class="about-icon col-md-12">
            <a href="{{ profile.url }}" ng-repeat="profile in about.profiles"><img ng-src="{{ profile.icon }}" /></a>
          </div>
        </div>

      </div>

    </div>

  </div>
</section>

CSS-

#about {
    height: 100%; 
    width: 100%;
    background: rgba(0,97,65,1);
    background: -moz-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,97,65,1)), color-stop(7%, rgba(54,135,95,1)), color-stop(22%, rgba(36,123,85,1)), color-stop(53%, rgba(0,97,65,1)), color-stop(76%, rgba(34,121,84,1)), color-stop(90%, rgba(54,135,95,1)), color-stop(100%, rgba(54,135,95,1)));
    background: -webkit-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: -o-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: -ms-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: linear-gradient(to right, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006141', endColorstr='#36875f', GradientType=1 );
    background-repeat: no-repeat;
    color: #101010;
    border-bottom: 3px solid black;
}

 #about .container-fluid, .about-row {
  height: 100%;
  width: 100%;
 }

.about-left {
  height: 100%;
  background-image: url('../../images/jay-ocean.jpg'); 
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100%;
  border-right: 3px solid #101010;
}

.about-right {
  height: 100%;
  width: 50%;
  padding-top: 24vh;
  padding-left: 3.4vw;
  text-align: center;
}

.about-right .row {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.about-content-title {
  padding-bottom: -30px;
}

.about-content-title h1{
  font-size: 3.1vw;
  margin: 3px;
}

.about-content-info p {
  font-size: 1vw;
  word-spacing: 0.3vw;
}

.about-button button {
  color: gray;
  border: 1px solid #101010;
  background-color: #101010;
  font-size: 0.7vw;
}

.about-button a {
  color: gray;
}

.about-personal-info h4 {
  font-size: 1vw;
  word-spacing: 0.3vw;
}

.about-icon img {
  height: 3.5vh;
  width: 1.75vw;
  border-radius: 10px;
  border: 1px solid #101010;
  margin: 3px;
}

Answer 1

实际上，由于 .about-right 和 .about-left 宽度属性，col-xs-12 不起作用。您已将其设置为 50%，只需将其删除即可。关于另一个问题，我总是使用像素，而且效果很好。这是我的解决方案CSS:

 html{height: 100%; }
body{height: 100%; }
#about {
    height: 100%;     
    background: rgba(0,97,65,1);
    background: -moz-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,97,65,1)), color-stop(7%, rgba(54,135,95,1)), color-stop(22%, rgba(36,123,85,1)), color-stop(53%, rgba(0,97,65,1)), color-stop(76%, rgba(34,121,84,1)), color-stop(90%, rgba(54,135,95,1)), color-stop(100%, rgba(54,135,95,1)));
    background: -webkit-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: -o-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: -ms-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: linear-gradient(to right, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006141', endColorstr='#36875f', GradientType=1 );
    background-repeat: no-repeat;
    color: #101010;
    border-bottom: 3px solid black;
}
.about-left { 
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100%;
  border-right: 3px solid #101010;
}
.about-right { 
  padding-top: 3vh;
  padding-left: 3.4vw;
  text-align: center;
}
.about-content-title {
  padding-bottom: -30px;
}
.about-content-title h1{
  font-size: 40px;
  margin: 3px;
}
.about-content-info p {
  font-size: 12px;
  word-spacing: 0.3vw;
}
.about-button button {
  color: gray;
  border: 1px solid #101010;
  background-color: #101010;
  font-size: 0.7vw;
}
.about-button a {
  color: gray;
}
.about-personal-info h4 {
  font-size: 10px;
  word-spacing: 0.3vw;
}
.about-icon img {
  height: 3.5vh;
  width: 1.75vw;
  border-radius: 10px;
  border: 1px solid #101010;
  margin: 3px;
}

html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>  
    <section id="about" ng-controller="aboutController">    
      <div class="container-fluid">

        <div class="about-left col-md-6 col-xs-12">
        <img src="./Album.gif" class="img-responsive disc col-xs-12" alt="Image">
        </div>
        <div class="about-right col-md-6 col-xs-12  text-justified">  
          <div class="col-md-6 col-md-offset-3">        
              <div class="about-content-title ">
                <h1><strong>I'M JAY.</strong></h1>
              </div> 

              <div class="about-content-info ">
                <p ng-if="about.firstParagraph">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.</p>

                <p ng-if="!about.firstParagraph">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.</p>
              </div>

              <div class="about-button col-md-12">
                <button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()">MORE =></button>
                <button ng-if="!about.firstParagraph" class="label label-success"><a href="/portfolio">VIEW SKILLS</a></button>
              </div>

              <div class="about-personal-info col-md-12">
                <h4>Email: jaybittner@gmail.com</h4>
              </div>

              <div class="about-icon col-md-12">
                <a href="{{ profile.url }}" ng-repeat="profile in about.profiles"><img ng-src="{{ profile.icon }}" /></a>
              </div>
            </div>
           </div>
          </div>
      </section>

    <script src="./js/jquery-2.1.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

</body>
</html>