bootstrap一页部分内容重叠

时间：2015-11-10 04:42:04

标签： jquery twitter-bootstrap mobile responsive-design

我试图使用bootstrap 3建立一个网站（见this fiddle）。问题是当我调整浏览器窗口大小时，所有内容都相互重叠。当窗口调整大小时，如何防止这种情况发生并保持每个内容与其自己的部分保持一致？

基本上我在每个部分的html中都采用了这种方法：

<section id="my_id" class="custom_class">
    <div class="container">
        <h1>Section Header</h1><hr />
        <div class="row">
                <div class="col-xx-xx">
                </div>
        </div>
    </div>
</section>

等等......

感谢您的帮助

1 个答案:

答案 0 :(得分：1)

这主要是由您padding-top适用于所有部分造成的。

请参阅工作示例摘录。

＆＃13;
＆＃13; 
html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  padding-top: 200px;
}
@media(min-width:767px) {
  .navbar {
    padding: 20px 0;
    -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
    transition: background .5s ease-in-out, padding .5s ease-in-out;
  }
  .top-nav-collapse {
    padding: 0;
  }
}
.container > h1 {
  text-shadow: 0 1px 3px #00A7E4;
}
.form-horizontal {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
..jumbotron,
.panel-heading:not(.no-shadow),
.btn {
  text-shadow: 0 1px 3px #000;
}
hr {
  height: 30px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 1px 0 0 0;
  border-radius: 20px;
}
hr:before {
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 0 0 1px 0;
  border-radius: 20px;
}
.intro-section {
  text-align: center;
  background: #fff;
}
.courses-section {
  text-align: center;
  background: gray;
  color: black;
}
.prices-section {
  text-align: center;
  background: #fff;
  color: black;
}
.registration-section {
  text-align: center;
  background: gray;
}
.navbar .navbar-header {
  height: 120px;
}
.navbar.navbar-fixed-top {
  background-color: cyan;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
.intro-section .jumbotron {
  background-color: purple;
  color: #fff;
}
/* Custom default button */

.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #fff;
  text-shadow: none;
  /* Prevent inheritence from `body` */
  background-color: black;
  border: 1px solid #fff;
  font-weight: bold;
}
.courses-section .panel-default>.panel-heading {
  background-color: black;
  line-height: 60px;
  font-size: 130%;
  color: #fff;
  font-weight: bold;
}
div > h1 {
  color: black;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header page-scroll"> <a class="navbar-brand page-scroll" href="#page-top">My Website</a> 
      </div>
    </div>
  </nav>
  <!-- Intro Section -->
  <section id="intro" class="intro-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="jumbotron">
            <h1 class="cover-heading">What is Lorem Ipsum</h1>

            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et efficitur sapien. Etiam maximus ex non nulla auctor hendrerit. Suspendisse augue tortor, facilisis vitae tellus vel, ultrices tempor felis. Nulla sed nisi sit amet urna tincidunt
              dictum. Proin ac tellus at tortor fringilla feugiat. Maecenas nec est gravida, lobortis purus quis, iaculis nibh. Aenean dictum ex eu ligula rutrum, at gravida ligula rutrum. Mauris scelerisque ex pharetra erat fermentum lacinia at ac tortor.
              Aliquam mauris quam, scelerisque nec nibh at, mattis sodales libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam at ipsum quam. Nulla quis leo eget purus pharetra laoreet interdum ac eros. Integer in maximus risus.
              Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec dignissim diam sapien, ac sodales velit tempor vel. Vestibulum nec neque vel magna feugiat aliquam a eu eros. Nulla ut faucibus eros, sit amet suscipit nibh. Suspendisse
              potenti. Vestibulum placerat sed nisi id malesuada. Cras augue ex, dignissim finibus accumsan in, tempus sit amet orci. Sed suscipit blandit tellus sit amet placerat. Fusce id dapibus magna, id condimentum velit. Nam sodales vitae massa
              in sodales.</p>
            <p class="lead">In scelerisque velit non dolor tristique ultrices. Morbi at erat urna. Phasellus ut augue congue velit laoreet pellentesque. Proin consequat maximus turpis laoreet volutpat. Nunc posuere ornare libero, vitae dignissim tortor pharetra et. Donec
              eu tellus vel lectus placerat viverra sit amet in arcu. Ut placerat dignissim velit. Sed eu urna ipsum. Vestibulum aliquam felis eget sem euismod, id pharetra turpis finibus.</p> <a class="btn btn-default btn-info page-scroll" href="#courses">Click me</a>

          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Courses offered Section -->
  <section id="courses" class="courses-section">
    <div class="container">
      <h1>Items list</h1>

      <hr />
      <div class="row">
        <div class="col-lg-6">
          <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading clearfix">
              <h3>Table 1</h3>

            </div>
            <!-- <div class="panel-body">
						    <p>Ceci est la liste des cours offerts pour les cégeps francophones</p>
						  </div>-->
            <!-- List group -->
            <ul class="list-group">
              <li class="list-group-item">Item 1</li>
              <li class="list-group-item">Item 2</li>
              <li class="list-group-item">Item 3</li>
              <li class="list-group-item">Item 4</li>
              <li class="list-group-item">Item 5</li>
              <li class="list-group-item">Item 6</li>
              <li class="list-group-item">Item 7</li>
            </ul>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading clearfix">
              <h3>Table 2</h3>

            </div>
            <!-- <div class="panel-body">
						    <p>Ceci est la liste des cours offerts pour les cégeps anglophones</p>
						  </div>-->
            <!-- List group -->
            <ul class="list-group">
              <li class="list-group-item">Item 1</li>
              <li class="list-group-item">Item 2</li>
              <li class="list-group-item">Item 3</li>
              <li class="list-group-item">Item 4</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Price Section -->
  <section id="prices" class="prices-section">
    <div class="container">
      <h1>Plans</h1>

      <hr />
      <div class="row">
        <div class="col-lg-4">
          <div class="panel panel-info">
            <div class="panel-heading no-shadow">
              <h3 class="text-center">Regular </h3>

            </div>
            <div class="panel-body text-center">
              <p class="lead" style="font-size:30px"><strong>$300</strong>

              </p>
            </div>
            <div class="panel-footer"> <a class="btn btn-lg btn-block btn-info page-scroll" href="#registration">Subscribe</a>

            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="panel panel-danger">
            <div class="panel-heading no-shadow">
              <h3 class="text-center">Premium</h3>

              <p class="text-center">(most popular)</p>
            </div>
            <div class="panel-body text-center">
              <p class="lead" style="font-size:30px"><strong>$130</strong>

              </p>
            </div>
            <div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger page-scroll" href="#registration">Subscribe</a>

            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="panel panel-success">
            <div class="panel-heading no-shadow">
              <h3 class="text-center">Member</h3>

            </div>
            <div class="panel-body text-center">
              <p class="lead" style="font-size:30px"><strong>$100</strong>

              </p>
            </div>
            <div class="panel-footer"> <a class="btn btn-lg btn-block btn-success page-scroll" href="#registration">Subscribe</a> 
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Registration Section -->
  <section id="registration" class="registration-section">
    <div class="container">
      <h1>Register</h1>

      <hr />
      <div class="row">
        <div class="col-lg-12">
          <form class="form-horizontal">
            <div class="form-group">
              <label for="inputName" class="col-sm-2 control-label">Name</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="inputName" placeholder="Ton nom de famille...">
              </div>
            </div>
            <div class="form-group">
              <label for="inputFirstName" class="col-sm-2 control-label">First name</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="inputFirstName" placeholder="Ton prénom...">
              </div>
            </div>
            <div class="form-group">
              <label for="inputEmail" class="col-sm-2 control-label">Email</label>
              <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail" placeholder="Ton adresse courriel...">
              </div>
            </div>
            <div class="form-group">
              <label for="mobile-number" class="col-sm-2 control-label">Phone</label>
              <div class="col-sm-10">
                <input type="tel" class="form-control" id="mobile-number">
              </div>
            </div>
            <div class="form-group">
              <label for="inputCollege" class="col-sm-2 control-label">College</label>
              <div class="col-sm-10">
                <select class="form-control">
                  <option>Choose your college...</option>
                  <option>College 1</option>
                  <option>College 2</option>
                  <option>College 3</option>
                  <option>College 4</option>
                  <option>College 5</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="inputProgram" class="col-sm-2 control-label">Major</label>
              <div class="col-sm-10">
                <select class="form-control">
                  <option>Choose your major...</option>
                  <option>Major 1</option>
                  <option>Major 2</option>
                  <option>MAjor 3</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Subscribe</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题