为什么我无法在bootstrap中启动新行？

时间：2018-04-24 07:30:35

标签： html css twitter-bootstrap bootstrap-grid

我创建了一个包含多个列的部分。现在，我希望开始一个新行，所以我也创建了一个新容器。但是当我运行该文件时，不会添加新行。相反，正在制作另一个专栏。任何人都可以帮我调试这段代码。 

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Gaegu" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Patrick+Hand" rel="stylesheet">

  <title> Techversity </title>
  <style type="text/css">
        * {
      box-sizing: border-box
    }
    
    body {
      font-family: "Lato", sans-serif;
    }
    /* Style the tab */
    
    .tab {
      float: left;
      background-color: #e7e7e7;
      width: 20%;
      height: 700px;
      border-top: 1px solid #ccc;
    }
    /* Style the buttons inside the tab */
    
    .tab button {
      display: block;
      background-color: #e7e7e7;
      color: black;
      padding: 22px 16px;
      width: 100%;
      border: none;
      outline: none;
      text-align: left;
      cursor: pointer;
      transition: 0.3s;
      font-size: 17px;
    }
    /* Change background color of buttons on hover */
    
    .tab button:hover {
      background-color: #ddd;
    }
    /* Create an active/current "tab button" class */
    
    .tab button.active {
      background-color: white;
      border: none;
      border-top: black solid;
      border-color: grey;
    }
    /* Style the tab content */
    
    .tabcontent {
      float: left;
      padding: 0px 12px;
      width: 80%;
      border: none;
      height: 700px;
      background-color: #e7e7e7;
    }
    
    .nav-item:hover {
      background-color: rgba(0, 0, 0, 0.08);
    }
    
    #community-col {
      height: 300px;
    }
    
    #mission-contact:hover {
      border-color: white;
      border-radius: 5px;
    }
    
    @media (min-width: 800px) {
      .para-padding {
        padding-left: 120px;
        padding-right: 120px;
      }
    }
    
    @media (max-width: 800px) {
      .tabcontent {
        height: 800px;
      }
      .tab {
        height: 800px;
      }
    }
    
    @media (max-width: 600px) {
      .tab {
        height: 300px;
        width: 100vw;
      }
      #contact-mission {
        width: 5px;
      }
      .tabcontent {
        width: 100vw;
      }
    }
    
    @media (max-width: 800px) {
      #community-mission-image {
        display: none;
      }
      #community-mission-image-2 {
        display: inline;
      }
    }
    
    @media (min-width: 600px) {
      #hidetabs {
        display: none;
      }
    }
    
    @media (max-width: 1023px) {
      #design-mission-image {
        width: 100px;
      }
      @media (min-width: 1150px) {
        #design-mission-image {
          min-width: 300px;
        }
  </style>
  <script>
    $(document).ready(function() {
      $("#hidetabs").click(function() {
        $(".tab").hide(300);
        $("#showtabs2").show(300);
      });
    });
    $(document).ready(function() {
      $("#showtabs").click(function() {
        $(".tab").show(300);
      });
    });

    $(document).ready(function() {
      $("#showtabs2").click(function() {
        $(".tab").show(300);
        $("#showtabs").hide();
        $("#showtabs2").hide();
        $("#hidetabs").show();
      });
    });
  </script>

</head>

<body class="sidebar-collapse">

  <div class="tab" id="test">
    <br>
    <br>
    <center>
      <h2><i id="showtabs" class="fa fa-diamond" style="display: none;"></i><i id="hidetabs" class="fa fa-gear"></i></h2>
    </center>
    <center>
      <p style="font-family: 'Gaegu', cursive;"></p>
    </center>
    <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen" style="font-family: 'Maven Pro', sans-serif;">Design</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')" style="font-family: 'Maven Pro', sans-serif;">Community</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')" style="font-family: 'Maven Pro', sans-serif;">Development</button>
  </div>
  <div id="London" class="tabcontent">
    <br>
    <br>
    <section id="services">
      <header class="section-header wow fadeInUp">

        <h1><i id="showtabs2" class="fa fa-diamond" style="display: none;"></i>
          <center>
            <p style="font-family: 'Gaegu', cursive;">f8guo</p>
          </center>
        </h1>

      </header>
      <br>
    </section>
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <center>
            <ul class="nav nav-pills">
              <li class="nav-item" style="width: 30%">
                <a href="" class="active nav-link" data-toggle="pill" data-target="#tabone">bjkjk</a>
              </li>
              <li class="nav-item" style="width: 30%">
                <a class="nav-link" href="" data-toggle="pill" data-target="#tabtwo">fyfo</a>
              </li>

            </ul>
          </center>
          <div class="tab-content mt-2">
            <div class="tab-pane fade show active" id="tabone" role="tabpanel">
              <p class="development-tab-content">
                <center>
                  <h3>
                    <i class="fa fa-diamond"></i>
                  </h3>
                </center>
              </p>
              <p style="font-size: 20px;font-family: arial;">ri guibypyionoytfrxrexxe6r7ct78yunuuinbyvftrcreerzqxwtceytibyouiuonuununiuiyvrrcrctubtybuoyoboy8byuytvvttv
                <br>
              </p>
              <br>
              <br>

              <br>
              <center><a href="#" id="contact-mission" class="btn btn-outline-primary" style="font-size: 22px;width: 300px;outline-width: 50px;height: 50px">Contact</a></center>

            </div>
            <div class="tab-pane fade" id="tabtwo" role="tabpanel">
              <center>
                <h3>

                  <i class="fa fa-diamond"></i>
                </h3>
              </center>
              <p style="font-size: 20px;font-family: arial;">hdsyhfuihiucxhiviuszhpuoidgashoihofdiihuaugeffuhfioiohiohiohgfsoufgufguffgufgosfuoisfousfdhofshosgfhheefhhefhevr uereru0eue0e90ru r</p>

              <br>
              <br>

              <br>
              <center><a href="#" id="contact-mission" class="btn btn-outline-primary" style="font-size: 22px;width: 300px;outline-width: 50px;height: 50px;font-family: 'Pacifico', cursive;">Contact</a></center>

            </div>

          </div>
        </div>

        <div class="col-md-4">
          <center>
            <br>
            <br>
            <br><img src="images/webdesign.svg" id="design-mission-image" style="object-fit: scale-down;width: 190px;padding-top: 35px;overflow: hidden;">
          </center>
        </div>
      </div>
    </div>
    <div id="Paris" class="tabcontent">
      <br>
      <br>
      <section id="services">
        <header class="section-header wow fadeInUp">
          <center>
            <h1>MISSION</h1>
          </center>
        </header>
        <br>
      </section>
      <div class="row" id="community-row">
        <div class="col-md-12" id="community-col">
          <h3>
            <center>
              <p>gsdgrr</p>
            </center>
          </h3>
          <p style="font-size: 20px;font-family: arial;margin-left: 30px;margin-right: 30px;" class="para-padding">I j[pjigihdfhighihofojs0daidsa0isda0af0dihfihsiha0finvfzfkob
            <br>
            <br>hifapifhdsodspofhIfdhihidfhhfidhfdvkjkjugofbovxhbuvobbvbouobupfvbpbpfvbibfiubiuvfvdhohovnighivingr g vrnun90ecun09enuxdhinxhfchfhinncifnicfnicf
          </p>

          <br>

        </div>

      </div>
    </div>
    <div id="Tokyo" class="tabcontent">
      <br>
      <br>
      <section id="services">
        <header class="section-header wow fadeInUp">
          <center>
            <h1>MISSION</h1>
          </center>
        </header>
        <br>
      </section>
      <div class="row" id="community-row">
        <div class="col-md-12" id="community-col">
          <h3>
            <center>
              <p>Development</p>
            </center>
          </h3>
          <br>
          <p style="font-size: 20px;font-family: arial;margin-left: 30px;margin-right: 30px;" class="para-padding">ucfiuiyivhvjhcdtyfuuguilo;gggggggohkvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvhllllllllvlihhhhhhhhhhhhhh
            <br>
            <br> tkuffyuooot87cghkcgkcggggggggggggggggggggggggggg
          </p>

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

  <br>
  <script>
    function openCity(evt, cityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
    }

    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
  </script>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
      <div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
    </div>
  </div>
</body>

</html>

如何使数据显示在前一行下方的新行中？任何帮助都会被贬低！提前谢谢！

1 个答案:

答案 0 :(得分：0)

我认为你的问题在于混合不同的Bootstrap版本。将<head>中的Bootstrap 4链接更改为Bootstrap 3，最后一行显示在下方，而不是右侧：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

此外，您的头部还有一个指向Bootstrap.js版本3.3.7和4.0.0的链接，因此无论如何都应删除其中一个。

除此之外，您的最后两个媒体查询缺少结束括号：

@media (max-width: 1023px) {
    #design-mission-image {
        width: 100px;
    }
}
@media (min-width: 1150px) {
    #design-mission-image {
        min-width: 300px;
    }
}

您的代码中有许多内容可能需要清理，例如内联样式，空标记和<br>。将代码细分为最小的代码，找到任何问题都会容易得多。

相关问题
最新问题