如何修复引导框并使之响应

时间：2019-01-05 23:07:21

标签： css twitter-bootstrap

我正在实施我的投资组合，并且正在使用引导程序。我有一个页面的网站，其中各节的颜色不同，我通过CSS设置了它们的大小，当我打开移动版本时，某些按钮不在该节中，因此完全不负责任。是我以px为单位设置大小的问题吗？这是我的代码：Codepen，

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-size: 100%;
  font-family: 'Fjalla One', sans-serif;
  background-color: #1a1a1d;
  letter-spacing: 0.5em;
  font-weight: 900;
}

h1.first-section {
  font-size: 40px;
  color: #221D23;
  margin-left: 10px;
}

h1.second-section {
  font-size: 40px;
  color: #662E9B;
  margin-left: 10px;
}

h1.third-section {
  color: #0F1108;
  font-size: 40px;
  margin-left: 10px;
}

h1 {
  font-size: 40px;
  color: #9C89B8;
  padding-top: 30px;
}

p {
  font-size: 15px;
  letter-spacing: 1px !important;
  font-weight: normal !important;
}


/*color text animation*/

p.type {
  margin-top: 50px;
  font-weight: 900;
  font-size: 3.7em;
  color: transparent;
  background-image: linear-gradient(to right, #f00, #ff0, #0f0, #00f);
  -webkit-background-clip: text;
  animation: animate 10s linear infinite;
  background-size: 1000%;
}

@keyframes animate {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}


/*navigation*/

ul.nav a:hover {
  background-color: #000 !important;
}

a {
  font-size: 1.3em;
  color: #428bca !important;
}

#about {
  height: 768px;
}

#portfolio {
  padding-top: 50px;
  height: 768px;
  background-color: #6320EE;
}

#portfolio2 {
  padding-top: 50px;
  height: 768px;
  background-color: #43BCCD;
}

#portfolio3 {
  padding-top: 50px;
  height: 768px;
  background-color: #9BC9B5;
}

#contact {
  padding-top: 50px;
  height: 768px;
  background-color: #F4F1BB;
}

.navbar-toggle {
  border: none;
  background: none;
}


/*@media (min-width: 768px) {
    .navbar-inverse{
        background: none;
         border: none;
     }
    }*/

.navbar-inverse {
  border: none;
}


/*whiteline*/

.video {
  margin-top: 20px;
  box-shadow: 8px 9px 77px -15px rgba(0, 0, 0, 0.63);
}

.decription-whitelines {
  margin-top: 20px;
  text-align: justify;
}

.top {
  margin-top: 10%;
}

@media only screen and (max-width: 600px) {
  .top {
    margin-top: 50px;
  }
  .video {
    width: 100%;
  }
  .arrow-down {
    display: none;
  }
}

figure {
  margin: 16px 40px !important;
}

.img-fluid {
  max-width: 100%;
  height: auto;
  margin-top: 20px;
}


/*arrow down*  - https://www.youtube.com/watch?v=HisZIORbN0s*/

.arrow-down {
  width: 100%;
  text-align: center;
}

.arrow-down::after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-animation: 3s arrow infinite ease;
  animation: 3s arrow infinite ease;
}

@-webkit-keyframes arrow {
  0%,
  100% {
    top: 50px;
  }
  50% {
    top: 80px;
  }
}

@keyframes arrow {
  0%,
  100% {
    top: 50px;
  }
  50% {
    top: 80px;
  }
}


/*contact form */

.contact-form {
  margin-bottom: 5%;
  width: 100%;
}

.contact-form .form-control {
  border-radius: 1rem;
}

.contact-form form {
  padding: 10%;
}

.contact-form .submit {
  width: 50%;
  border: none;
  border-radius: 1rem;
  padding: 8px;
  background: #59C3C3;
  font-weight: 600;
  color: #fff;
  font-size: 15px;
}

form .submit:hover {
  background-color: #A8F9FF;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Sofi Stoyanova</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="main/main.css">
  <link rel="stylesheet" href="./node_modules/sal.js/dist/sal.css">


  <link rel="stylesheet" href="main/main.css">
  <link rel="stylesheet" href="./node_modules/sal.js/dist/sal.css">
</head>

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

  <!--navigation-->

  <nav class="navbar-expand-md navbar navbar-inverse bg-inverse navbar-fixed-top">

    <div class="container-fluid">

      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="nav navbar-nav navbar-center">
          <li><a class="text-uppercase" href="#about">about</a></li>
          <li><a class="text-uppercase" href="#portfolio">Works</a></li>
          <li><a class="text-uppercase" href="#contact">contacts</a></li>

        </ul>
      </div>
    </div>
  </nav>

  <!--about -->


  <div id="about" class="container-fluid">
    <div class="row">
      <!--first-->
      <div class="col-md-3 col-sm-3">

      </div>


      <!--second-->

      <div class="col-md-6 col-sm-6 top">
        <p class="type text-center text-uppercase font-weight-bold"></p>
      </div>

      <!--third-->

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

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

  <!--portfolio #1-->
  <div id="portfolio" class="container-fluid">
    <h1 class="first-section text-uppercase" data-sal-duration="1200" data-sal="slide-down" data-sal-delay="200" data-sal-easing="ease-out-bounce"> #1 <span style="font-size: 50px;color:#FBFFFE">Whitelines</span></h1>
    <div class="row" data-sal-duration="1200" data-sal="slide-up" data-sal-delay="700" data-sal-easing="ease-out-bounce">
      <div class="col-lg-6">
        <iframe class="video" width="480" height="270" data-aos="fade-down" src="https://www.youtube.com/embed/Be3GKzzFFEA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>



      <div class="col-lg-6 decription-whitelines">
        <h1 class=""><span style="color: #FFC83D">Project Description</span></h1>
        <br>
        <p><span style="color: #FBFFFE">Whitelines is a brand, producing notebooks with simple design but unique
                    technology. The papers are made with white lines and when they are scanned by Whiteline’s app
                    they immediately disappeared. Our video is trying to promote in the best way the brand’s product
                    and make it more desirable for the target audience, which is students – university and school
                    students.</span></p>
        <br>
        <button type="button" class="btn btn-danger">Danger</button>

      </div>


    </div>
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6">
        <a href="#portfolio2">
          <div class="arrow-down"></div>
        </a>
      </div>
    </div>
  </div>


  <!--portfolio #2-->
  <div id="portfolio2" class="container-fluid">
    <h1 class="second-section text-uppercase" data-sal-duration="1200" data-sal="slide-down" data-sal-delay="200" data-sal-easing="ease-out-bounce"> #2 <span style="font-size: 50px;color:#F9C80E">Scovsmose</span></h1>

    <div class="row" data-sal-duration="1200" data-sal="slide-up" data-sal-delay="700" data-sal-easing="ease-out-bounce">
      <div class="col-lg-6">



        <div>
          <img class="img-fluid" src="img/scovsmose.png" />
        </div>



      </div>
      <div class="col-lg-6 decription-whitelines">
        <h1 class=""><span style="color:#662E9B">Project Description</span></h1>
        <br>
        <p><span style="color:white">This project was developed from scratch for my 2nd semester at university.

                        The project is created in a team environment.Our client was a private dental clinic that needed
                        online presence to increase the number of clients and popularity in their town. Due to high
                        demand and big competition the main development method was mixed - 5Planes Ux with Prototyping.

                        Due to team contract I took part through the whole process in the four fields we researched and
                        work with - Communication, Deisg, Business and Interaction.</span></p>
        <br>
        <button type="button" class="btn btn-warning">Danger</button>

      </div>

    </div>
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6">
        <a href="#portfolio3">
          <div class="arrow-down"></div>
        </a>
      </div>
    </div>

  </div>

  <!--portfolio #3-->
  <div id="portfolio3" class="container-fluid">
    <h1 class="third-section text-uppercase" data-sal-duration="1200" data-sal="slide-down" data-sal-delay="200" data-sal-easing="ease-out-bounce"> #3 <span style="font-size: 50px;color:#F9C80E">Chiropractic Clinic</span></h1>

    <div class="row" data-sal-duration="1200" data-sal="slide-up" data-sal-delay="700" data-sal-easing="ease-out-bounce">
      <div class="col-lg-6">



        <div>
          <img class="img-fluid" src="img/chiropractor.jpg" />
        </div>



      </div>
      <div class="col-lg-6 decription-whitelines">
        <h1 class=""><span style="color:#662E9B">Project Description</span></h1>
        <br>
        <p><span style="color:white">This project was developed from scratch for my 2nd semester at university.
    
                            The project is created in a team environment.Our client was a private dental clinic that needed
                            online presence to increase the number of clients and popularity in their town. Due to high
                            demand and big competition the main development method was mixed - 5Planes Ux with Prototyping.
    
                           </span></p>
        <br>
        <button type="button" class="btn btn-info">Danger</button>

      </div>

    </div>

  </div>

  <!--contact-->
  <div id="contact" class="container-fluid contact-form">
    <h1 class="text-center">Feel free to contact me</h1>
    <form method="post" action="contact.form.php">
      <div class="row">
        <div class="col-lg-6">
          <div class="form-group">
            <input name="name" type="text" class="form-control" placeholder="Your name" value="">
          </div>
          <div class="form-group">
            <input name="email" type="text" class="form-control" placeholder="Your email" value="">
          </div>
          <div class="form-group">
            <input type="submit" class=" form-control submit" value="Send it to me">
          </div>
        </div>
        <div class="col-lg-6">
          <div class="form-group">
            <textarea name="message" class="form-control" placeholder="Your message" style="width: 100%; height: 150px;"></textarea>
          </div>
        </div>
      </div>
    </form>


  </div>



  <script src="/node_modules/sal.js/dist/sal.js"></script>
  <script>
    sal();
  </script>

  <script type="text/javascript" src="typed.js"></script>
  <script type="text/javascript">
    var typed = new Typed(".type", {
      strings: ["This is the portfolio of mutlimedia and design student. My name is Sofie, 20 years old and currently looking for an internship in Denmark...,"],
      typeSpeed: 20,

      loop: false

    });


    //clossing burger menu on mobile devices - https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247
    $(document).on('click', '.navbar-collapse.in', function(e) {
      if ($(e.target).is('a')) {
        $(this).collapse('hide');
      }
    });
  </script>
</body>

</html>

<!--https://www.youtube.com/watch?v=GrpuvsFDrdU - color text animation -->

1 个答案:

答案 0 :(得分：0)

之所以发生这种情况，是因为您要给部分提供固定的高度，宽度：

#portfolio {
    padding-top:50px;
    height:768px;        /*  <--- here  */
    background-color: #6320EE;
}

编写一些媒体查询，以查询高度可以达到1000px的较小设备：/ 

@media only screen and (max-width: 600px) {
  #portfolio {
    height:1000px;
  }
}
相关问题
最新问题