小编Ala*_*n M的帖子

在 Bootstrap 4 中使一行具有悬停效果而不使用表格

我想知道是否有办法让这里的行悬停？我想指出的是，我没有使用表格来创建它，而是使用 Bootstrap 4 中的网格系统。这可能吗？我研究的所有内容都表明您需要创建一个表才能实现这一点。

 <div class="row">
        <div class="report-card-i report-card-i-height">
            <h3 class="m-l-35 p-t-25 p-b-10">Compliance</h3>
            <div class="fa-orange m-t-10 m-b-15 m-l-80">
                <div class="row">
                    <div class="col-sm-1 col-xs-1 text-center">
                        <i class="fa fa-star m-r-15 text-center" style="font-weight: bold">Adjustment</i>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>21,922</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>$0.00</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>$304,012.23</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>$0.00</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>$0.00</p>
                    </div>
                    <div class="col-sm-1 col-xs-1 text-center">
                        <i class="fa fa-angle-right text-center" style="font-weight: bold"></i>
                    </div>
                </div>
        </div> …

Run Code Online (Sandbox Code Playgroud)

html css mousehover bootstrap-4

csb*_*b00

2020 01-21

7
推荐指数

1
解决办法

6026
查看次数

超链接 <div> 元素的集合

当我尝试超链接下面的代码时，它似乎弄乱了图像的包装并且只链接了图标而不是整个 flex-container。我试过尝试<span>元素，但没有任何成功。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  transition: opacity .2s ease-in-out;
  flex-wrap: nowrap
}

.flex-item {
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-family: verdana;
  width: 100%;
  display: flex;
  flex-shrink: 1;
  justify-content: center;
  align-items: center;
  font-size: calc(8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
  z-index: 10;
  flex-wrap: nowrap
}

.flex-item:before {
  content: '';
  float: left;
  padding-top: 100%;
}

.red-box …

Run Code Online (Sandbox Code Playgroud)

html css css-animations

and*_*dms

2020 02-13

2
推荐指数

1
解决办法

76
查看次数

如何将网页屏幕水平分成三等份？

我试图将屏幕水平分成 3 个相等的部分，这样我就可以将单独的图像放入每个部分中。我已经稍微平均地分割了屏幕，但是我遇到了一些空白问题并且没有被平均分割。

这是我所拥有的：

HTML：

    <div class="split left">
        <div class="centered">
            <img src="img_avatar2.png" alt="Avatar woman">
        </div>
    </div>

    <div class="split center">
        <div class="centered">
            <img src="img_avatar.png" alt="Avatar man">
        </div>
    </div>

    <div class="split right">
        <div class="centered">
            <img src="golf_course.jpg" alt="Finished Terrain Golf Course">
        </div>
    </div>

Run Code Online (Sandbox Code Playgroud)

CSS：

    <div class="split left">
        <div class="centered">
            <img src="img_avatar2.png" alt="Avatar woman">
        </div>
    </div>

    <div class="split center">
        <div class="centered">
            <img src="img_avatar.png" alt="Avatar man">
        </div>
    </div>

    <div class="split right">
        <div class="centered">
            <img src="golf_course.jpg" alt="Finished Terrain Golf Course">
        </div>
    </div>

Run Code Online (Sandbox Code Playgroud)

图像：