Html 如何修复在sm屏幕上同时运行的引导部分？_Html_Css_Web_Bootstrap 4

Html 如何修复在sm屏幕上同时运行的引导部分？

html css web bootstrap-4

Html 如何修复在sm屏幕上同时运行的引导部分？,html,css,web,bootstrap-4,Html,Css,Web,Bootstrap 4,我的网站在我的笔记本电脑上看起来很棒，但是，当我调整到一个小屏幕时，我的第一部分的文本会进入下一部分。其他一切看起来都很好，只是“继续”到下一部分。我是新的引导，所以我不理解。我试着添加新的分区标签，新的分区，但似乎仍然没有发现问题 <body> <nav id="navShadow" class="navbar navbar-expand-md navbar-dark effect"> <a class="navbar-brand" hre

我的网站在我的笔记本电脑上看起来很棒，但是，当我调整到一个小屏幕时，我的第一部分的文本会进入下一部分。其他一切看起来都很好，只是“继续”到下一部分。我是新的引导，所以我不理解。我试着添加新的分区标签，新的分区，但似乎仍然没有发现问题

<body>
    <nav id="navShadow" class="navbar navbar-expand-md navbar-dark effect">
        <a class="navbar-brand" href="#">Test Name</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto ">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#education">Education</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Work History</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>

            </ul>


        </div>
    </nav>
    <div class="container">
        <!--HEAD SECTION -->
        <section class="head">
            <header id="home-section">
                <div class="dark-overlay">
                    <div class="home-inner">
                        <div class="container">

                            <div class="row">



                                <div class="col-me-3 hidden-sm-down">
                                    <div class="grow">

                                        <img class="profile-pic" src="./img/portrait.jpg" alt="" />
                                    </div>
                                </div>

                                <div class="col-md-9 main-col">

                                    <h1 class="mb-2">About Me</h1>

                                    <p class="mt-4">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                        laudantium,
                                        totam rem aperiam,
                                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                                        Nemo enim ipsam
                                        voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
                                        qui ratione
                                        voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
                                        consectetur, adipisci velit,
                                        sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
                                        voluptatem.
                                        Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
                                    </p>
                                    <ul class="social">
                                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                        <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                        <li><a href="#"><i class="fa fa-skype"></i></a></li>
                                    </ul>
                                </div>
                            </div>

                        </div> <!-- end row -->

                    </div>
                </div>
    </div>
    </header>
    </section>


    <!-- Education -->

    <section id="education">
        <div class="education">
            <div class="container">
                <div class="row education justify-content-center">



                    <h1><span>Education</span></h1>

                </div>
                <div class="row">
                    <div class="col-9">
                        <h3>University of Life</h3>
                        <p class="info">Master in Field <span>&bull;</span> <em class="date">April 2017</em></p>

                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                            massa.
                            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
                            felis,
                            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Nullam dictum felis eu pede
                            mollis pretium.
                        </p>
                        <br>
                        <br>
                        <h3>University of Life</h3>
                        <p class="info">Master in Test <span>&bull;</span> <em class="date">march 2007</em></p>

                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                            massa.
                            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
                            felis,
                            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Nullam dictum felis eu pede
                            mollis pretium.
                        </p>
                    </div>

                    <div class="col-3">

                        <img src="./img/educationimg.jpg" alt="" class="eduimg">



                    </div>

                </div>


            </div>

        </div>
        </div> <!-- End Education -->
        </div>
        </div>
    </section>
    </div>

    <!-- Footer -->
    <footer class="page-footer font-small blue pt-3">

如果不查看css，html的结构是不正确的。如果我格式化你的html，它看起来像下面的代码。我已经评论了一些（可能不是全部）结构错误

<!--head section -->
<section class="head"> <!-- add row to class (parent is container) -->
  <header id="home-section">
    <div class="dark-overlay">
      <div class="home-inner">
        <div class="container">
          <div class="row">
            <div class="col-me-3 hidden-sm-down"> <!-- col-md-3 -->
              <div class="grow">
                <img class="profile-pic" src="./img/portrait.jpg" alt="" />
              </div>
            </div>
            <div class="col-md-9 main-col">
              <h1 class="mb-2">About Me</h1>
              <p class="mt-4">Some text</p>
              <ul class="social">
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
              </ul>
            </div>
          </div> <!-- end row -->
        </div> <!-- end container -->
      </div>
    </div>
    </div> <!-- NO starting div -->
  </header>
</section>

<!-- Education -->
<section id="education"> <!-- add class="row" (parent is container) -->
  <div class="education">
    <div class="container">
      <div class="row education justify-content-center">
        <h1><span>Education</span></h1>
      </div>
      <div class="row">
        <div class="col-9">
          <h3>University of Life</h3>
          <p>Some text</p>
          <h3>University of Life</h3>
          <p>Some text</p>
        </div>
        <div class="col-3">
          <img src="./img/educationimg.jpg" alt="" class="eduimg">
        </div>
      </div>
    </div> <!-- end container -->
  </div>
  </div> <!-- NO starting div -->
  </div> <!-- NO starting div -->
  </div> <!-- NO starting div -->
</section>


关于我
一些文本





教育类
生命大学
一些文本
生命大学
一些文本

请看Bootstrap 4网格示例如何使用container、row和col-x-y。最好的做法是在每个文本块上构建一行文本的结构，然后在不查看css的情况下测试它，因为html的结构不正确。如果我格式化你的html，它看起来像下面的代码。我已经评论了一些（可能不是全部）结构错误

<!--head section -->
<section class="head"> <!-- add row to class (parent is container) -->
  <header id="home-section">
    <div class="dark-overlay">
      <div class="home-inner">
        <div class="container">
          <div class="row">
            <div class="col-me-3 hidden-sm-down"> <!-- col-md-3 -->
              <div class="grow">
                <img class="profile-pic" src="./img/portrait.jpg" alt="" />
              </div>
            </div>
            <div class="col-md-9 main-col">
              <h1 class="mb-2">About Me</h1>
              <p class="mt-4">Some text</p>
              <ul class="social">
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
              </ul>
            </div>
          </div> <!-- end row -->
        </div> <!-- end container -->
      </div>
    </div>
    </div> <!-- NO starting div -->
  </header>
</section>

<!-- Education -->
<section id="education"> <!-- add class="row" (parent is container) -->
  <div class="education">
    <div class="container">
      <div class="row education justify-content-center">
        <h1><span>Education</span></h1>
      </div>
      <div class="row">
        <div class="col-9">
          <h3>University of Life</h3>
          <p>Some text</p>
          <h3>University of Life</h3>
          <p>Some text</p>
        </div>
        <div class="col-3">
          <img src="./img/educationimg.jpg" alt="" class="eduimg">
        </div>
      </div>
    </div> <!-- end container -->
  </div>
  </div> <!-- NO starting div -->
  </div> <!-- NO starting div -->
  </div> <!-- NO starting div -->
</section>


关于我
一些文本





教育类
生命大学
一些文本
生命大学
一些文本

请看Bootstrap 4网格示例如何使用container、row和col-x-y。最好在每个文本块上构建一行文本的结构，然后对其进行测试

我不确定，但您可以在.css文件中尝试以下操作：

@media only screen and (max-width: 768px){
     /*----There you can implement your sections----*/
     /*----Example:----*/
     .card{
          height: 50%;
          width: 50%;
     }
}

使用此代码时，最大宽度或小于768px的屏幕使用此代码。

检查一下，也许对你有帮助

我不确定，但您可以在.css文件中尝试：

@media only screen and (max-width: 768px){
     /*----There you can implement your sections----*/
     /*----Example:----*/
     .card{
          height: 50%;
          width: 50%;
     }
}

使用此代码时，最大宽度或小于768px的屏幕使用此代码。

检查一下，也许对你有帮助

我没有遇到这个问题。你在测试什么浏览器？我在测试Chrome 76.0.3809.100版。你能提供一个屏幕截图吗？Bootstrap 4可以在所有浏览器中正常工作，即使是在IE10/IE11中。我没有遇到这个问题。你在测试什么浏览器？我在测试Chrome 76.0.3809.100版。你能提供一个屏幕截图吗？Bootstrap 4在所有浏览器中都能正常工作，即使是在IE10/IE11中。