Question

所以我是网络开发人员的新手，但我无法找到解决问题的方法。我有两个div，当你将浏览器屏幕更改为最小尺寸或在移动设备上打开时我的两个div重叠。如果你让窗口变小，两个研究气泡就会重叠。这是行动中的网站： http://gwensume.com/RKLResearch.html

这里有很多代码对不起...我已经尝试将div更改为相对而不是绝对但是创建了这些大白框..

<html lang="en">
  <head>
    <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Richard K. Larson</title>

     <!-- Bootstrap -->
     <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- RKL CSS -->
       <link type="text/css" rel="stylesheet" href="RKL.css"/>
     </head>
     <body>
   <!-- ### Header Begin ### -->

       <div class="navbar navbar-default navbar-fixed-top" role="navigation">
         <div class="container">
         <div class="name hidden-xs">
         <h1>Richard K. Larson</h1>
         <h4>Professor, Linguistics</h4>
         /div>
           <div class="navbar-header">
             <button type="button" class="navbar-toggle " data-       toggle="collapse" data-target=".navbar-collapse">
               <span class = "sr-only">Toggle navigation</span>
               <span class = "icon-bar"></span>
               <span class = "icon-bar"></span>
               <span class = "icon-bar"></span>
             </button>
       <a class="navbar-brand hidden-sm hidden-md hidden-lg">Richard Larson</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav nav-pills navbar-right " role = "navigation">
        <li><a href="index.html">Home</a></li>
        <li class="active"><a href="RKLResearch.html">Research</a></li>
        <li class = "dropdown">
          <a href="#" class = "dropdown-toggle" data-toggle = "dropdown" aria-expanded = "true"> Publications <b class = "caret"></b></a>
            <ul class = "dropdown-menu">
              <li><a href="RKLArticles.html"> Articles </a></li>
              <li><a href="RKLBooks.html"> Books </a></li>
              <li><a href="RKLSoftware.html"> Software </a></li>
              <li><a href="RKLPresentations.html"> Presentations </a></li>
              <li><a href="RKLUnpublished.html"> Unpublished </a></li>
            </ul>
        </li>
        <li><a href="RKLPJ.html">Port Jefferson</a></li>    
        <li><a href="RKLContact.html">Contact</a></li>  
      </ul>
    </div>
  </div>
</div>

        <div class="container">
          <div class="row">
           <div class="darkBG2 col-xs-9 col-sm-8 col-md-8 col-lg-8">
            <h3>The Structure & Projection of DP:</h3>
             <p>LOTS OF TEXT
            </p>
        </div>
    <div class="darkBG3 col-xs-9 col-sm-8 col-md-8 col-lg-8">
    <h3>The Comparative Grammar of Intensional Transitive Verbs: </h3>
                    <p>MORE TEXT!
                    </p>
                    <p>
                    EVEN MORE TEXT!
                    </p>
                    </div>
                    <div class="space"></div>

CSS：

        html {
background: url(backgroundlyra.jpg) no-repeat center center fixed;
background-attachment: fixed;
background-size: cover;
position: relative;
min-height: 100%;
 }

h1 {font-size: 4vw;}
h4 {margin-top: -10px;}


.navbar {
background-color: #B8B8B8;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
color: #CD5C5C;
opacity: .95;
position: fixed;
display: inline;
}
 body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
 }

.footer p {
display: inline;
margin-right: 15px;
padding-top: 60px;
bottom: 0;
height: 60px;
width: 100%;
}

.navbar p {
margin-top: -10px;
font-size: 15px;
}

.darkBG {
background: #B8B8B8;
position: absolute;
top: 160px;
right: 50px;
border-radius: 10px;
opacity: .95;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
padding: 10px;
margin-left: 50%;
 }

 .darkBG2 {
background: #B8B8B8;
position: absolute;
top: 20vh;
border-radius: 10px;
opacity: .95;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
padding: 0 10px 10px 10px;
margin: 100px;
display: inline;
height: 30%;
  }

.darkBG3 {
background: #B8B8B8;
position: absolute;
top: 55vh;
border-radius: 10px;
opacity: .95;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
padding: 0 10px 10px 10px;
display: inline;
margin: 100px;
height: 60%;
}

img {
margin-left: 4%;
top: 160px;
float: left;
position: absolute;
border-radius: 10px;
max-width: 100%;
height: 21vh;
width: 21vw;
 }

.navbar-brand {
color: #CD5C5C;
}

.space {
opacity: 0;
}

Answer 1

嗯，你有什么期望？你没有放置一个新的.row元素，而是一个接一个地使用2 col-xs-9 col-sm-8 col-md-8 col-lg-8个引用的引导元素，这给了行的误导效果，但它并不是假设以这种方式工作。如果要显示2行，则只需编写html即可显示。也许快速查看bootstrap reference guide将告诉你如何使用bootstrap

Answer 2

你已经给出了div的绝对位置。这就是为什么bootstrap无法正确排列它们的原因。删除包含position:absolute;，darkBG2类的div中的darkBG3以解决此问题。 position

.darkBG2 {
  background: #B8B8B8;
  /* position: absolute; */
  /* top: 20vh; */
  border-radius: 10px;
  opacity: .95;
  font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
  padding: 0 10px 10px 10px;
  margin-left: 15vw;
  margin-bottom: 20vh;}

.darkBG3 {
  background: #B8B8B8;
  /* position: absolute; */
  /* top: 55vh; */
  border-radius: 10px;
  opacity: .95;
  font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
  padding: 0 10px 10px 10px;
  margin-left: 15vw;
}

进行这些更改后，您会看到两个问题。

修复背景更改

body{
background:transparent;
}

修复导航栏内容问题

.container{
margin-top: 40vh;
}

浏览器大小更改时Div重叠

2 个答案: