活动类和悬停边界导致链接列表中的图像使用Bootstrap跳过HTML和CSS中的网格

Question

以下是有关网站的链接：http://shortpoet.github.io

它是为一个班级而建的。我试着向助教和教授寻求帮助，但似乎没有人能够解释这种意外行为。我已经搜索了可能的答案，包括：

• 设置包含div的最小/最大高度
• 使用img缩略图类
• 更改列大小和网格结构
• 更改边框大小(仅消除边框有效，但这违背了
  我试图构建的功能的目的
• 更改填充
• 也许还有其他我现在没有想到的事情，我已经尝试了我能想到的一切，谷歌

我正试图将四个图中的一个图的活动链接/图像包围在带有边框的方形网格中。我还有一个围绕：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>

Answer 2

您可以为非活动图像添加透明边框，以便在边框可见时大小保持不变，仅CSS的解决方案可以是：

#visualizations a img {
border: 2px solid transparent;
}
#visualizations a img.active {
border: 2px solid #5A5AB2;
}
#visualizations a img:hover {
border: 2px solid #FFAB80;
}

Answer 3

问题是因为框架的宽度非常窄，当你放置2px边界时，同一行上没有更多的元素，这在一些元素中会出现这个问题。

如果你不想在结构中乱来，你可以编辑你的CSS的这一部分：

img.active {
border: #5A5AB2 2px solid;
width: calc(100% - 2px); /*add this line*/
}

这样，当它和那个类在一起时，它在这个元素中的宽度减少了2px。我使用了calc的CSS方法，只将2px设置为更小。

(我直接在你的网站上由元件检查员进行了测试，结果有效(

希望这能有所帮助！

Answer 4

这种做法最近也发生在我身上，但使用CSS非常简单。你只需要事先生成一个透明的颜色边界，所以当你用：悬停修改它的颜色时，你只需要改变它的颜色。我将代码分享给我的方法：

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

要解决此问题，只需按行将图像对分离，即可正确地分离内容，并且不会不匹配。我附上

<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>