html - 事件类和悬停边框导致链接列表中的图像使用 Bootstrap 在 HTML 和 CSS 中跳过网格

Question

这是相关网站的链接:http://shortpoet.github.io

它正在为一个类(class)而建。我曾尝试向助教和教授寻求帮助，但似乎没有人能够解释这种意外行为。我搜索了可能的答案，包括:

• 设置包含 div 的最小/最大高度
• 使用 img-thumbnail 类
• 更改列大小和网格结构
• 更改边框大小(仅消除边框有效但会失败
  我尝试构建的功能的目的
• 改变内边距
• 也许还有其他我现在没有想到的事情，我已经尝试了所有我能想到的和谷歌

我试图用边框将一个或四个地 block 的事件链接/图像包围在方形网格中。我还有一个围绕 :hover 元素的边框。有五个页面，我在其中使用图像集群作为链接。除了“湿度”之外，网格以略有不同的方式被打破。在所有情况下，第四张图像“风速”都移到了另一行。在所有情况下，将鼠标悬停在“湿度”图像上会将网格重置到适当的位置，或者当该图像上有永久边框时因为它当前处于事件状态。

我将包含一小段特定区域的代码。由于上面包含链接，因此测试行为应该是可行的。

<div class="col-sm-12 col-md-4">            
          <div class="row">
          <div class="col-sm-12">
              <section id="visualizations">
                  <h3 class="text-center">Visualizations</h3>
                  <hr>
                  <div class="row">
                    <div class="col-xs-6">        
                      <a class="active" href="temperature.html">
                        <img class="img-responsive active" src="assets/images/Fig1.png" alt="Scatter plot of City Latitude vs Temperature in degrees Fahrenheit">
                        <span class="sr-only">(current)</span>
                      </a>
                    </div>
                    <div class="col-xs-6">     
                      <a href="humidity.html">
                        <img class="img-responsive" src="assets/images/Fig2.png" alt="Scatter plot of City Latitude vs Humidity">
                      </a>
                    </div>        
                    <div class="col-xs-6">           
                      <a href="cloudiness.html">
                        <img class="img-responsive" src="assets/images/Fig3.png" alt="Scatter plot of City Latitude vs Cloudiness">                     
                      </a>
                    </div>
                    <div class="col-xs-6">
                      <a href="windSpeed.html">
                        <img class="img-responsive" src="assets/images/Fig4.png" alt="Scatter plot of City Latitude vs Wind Speed">
                      </a>
                    </div>
                  </div>
                </section>
          </div>
          </div>
        </div>    

我包含了大部分 CSS 是为了更好地衡量......

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Portrait phones and smaller */
@media (max-width: 480px) {
    /*body {
        background-color: silver;
    }*/
}

body {
    background-color: silver;
    padding: 1% 0% 13% 0%;
}

.navcolor {
    background-color: #6EB25A;
    color: #5A5AB2 !important;
}
.navborder {
    border: #ffab80 1px solid;
}

.all {
    color: #6EB25A;
    background-color: #5A5AB2;
    border: #ffab80 solid 1px;
    padding: 3%;
}

#title {
    position: relative;
    right: 17%;
}

#comparison #title {
    position: inherit;
}

#comparison, hr {
    width: 100%;
}

h1 {
    color: #6EB25A;
    text-align: center;
    width: auto;
    vertical-align: middle;
}
hr {
    border-color: #ffab80
}

hr.specialtest {
    margin: 0 0px 0 37px;
    width: 90%;
}

hr.special {
    margin: 20px 0px 0px 37px;
    width: 90%;
}

.box {
    color: #6EB25A;
    background-color: #5A5AB2;
    /*border: 3px #FFAB80 solid;
    border-radius: 35%;*/
    vertical-align: middle;
    /*width: 500px;*/
    height: auto;
    padding: 0% 0%;
}

#image, h4 {
    background-color: white;
    padding: 2% 0% 0% 0%;
}

#image {
    border-top: #ffab80 solid 2px;
    border-left: #ffab80 solid 2px;
    border-right: #ffab80 solid 2px;
}

#index #image {
    float: left;
    height: 200px;
    width: 300px;
    border: 0;
    padding: 30px 5px 5px 5px;
}

#index h4 {
    text-align: right;
    padding-right: 13.5%;
}

#index #analysis hr {
    width: 300px;
}

#index #analysis {
    padding: 2% 5%;
}

#index p {
    padding: 0 !important;
    line-height: 200%;
}

#mainbox {
    padding: 1% 5%;
}

#visualizations img:hover {
    border: #ffab80 2px solid;
}

nav a:hover {
    border: #ffab80 2px solid;
}

#analysis {
    background-color: white;
    border-bottom: #ffab80 solid 2px;
    border-left: #ffab80 solid 2px;
    border-right: #ffab80 solid 2px;
}

#temperature #analysis {
    background-color: white;
    border-left: #ffab80 solid 2px;
    border-right: #ffab80 solid 2px;
    border-bottom: 0 !important;
}

#testrow {
    max-height: 317px;
}

#analysis, h4 {
    padding: .5% 0% 0% 0%;
}

#analysis p {
    padding: 2% 13% 5% 13%;
}

#map {
    background-color: white;
    border-bottom: #ffab80 solid 2px;
    border-left: #ffab80 solid 2px;
    border-right: #ffab80 solid 2px;
}

#map, h4 {
    padding: .5% 0% 0% 0%;
}

#map p {
    padding: 2% 13% 5% 13%;
}

#map img {
    padding: 2%;
}

#visualizations {
    background-color: white;
    padding: 2% 1% 5% 1%;
}

#visualizations hr {
    width: 90%;
}

#image hr {
    width: 90%;
}

img {
    max-width: 90%;
    max-height: 90% !important;
}

img.active {
    border: #5A5AB2 2px solid;
}

.line {
    display: inline-block;
}

.center {
    align-content: center;
    justify-content: center;
}

table, th, td {
    border: 1px solid black;
    border-spacing: 5px; /* why won't this apply ? */
}

tr:nth-child(even) {
    background-color: #f2f2f2
}

.bulletproof {
    list-style-type: none;
}

/*body {
    background-color: silver;
}*/

/* Pagination links */
.pagination a {
    color: #6EB25A;
    float: left;
    padding: 21px 211px;
    text-decoration: none;
    transition: background-color .3s;
    border: #ffab80 1px solid;
  }

  /* Style the active/current link */
  .pagination a.active {
    background-color: dodgerblue;
    color: white;
  }

  /* Add a grey background color on mouse-over */
  .pagination a:hover:not(.active) {background-color: #ddd;}

请原谅这篇文章中的任何错误，并指导我进行最佳实践，因为这是我的第一次。我尝试使用代码按钮但不确定它是否会起作用。提前致谢:)

Answer 1

是的，所以您需要在前两个和最后两个 col-xs-6 之间添加一个新行。您的总体结构应如下所示:

<section id="visualizations">
  <div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>  
  <div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>  
</section>