Question

所以我使用的是BS4中的card组件，但是它有一些意外的行为： enter image description here

所以基本上这就是我在mozilla dev版本上看到的。标记如下：

    lenoftags = driver.find_elements_by_xpath('//a[@class="author size-m workspace-trigger"]//*[local-name()="svg"]')
    tagcount = len(lenoftags)
    newcount = range(1, tagcount)
    if len(lenoftags) == 0:
        driver.back()
    elif len(lenoftags) >= 1:
        for jj in newcount:
            try:
                driver.find_element_by_xpath('//a[@class="author size-m workspace-trigger"][%d]//*[local-name()="svg"]'%jj).click()
            except (NoSuchElementException, TimeoutException, WebDriverException):
                try:
                    driver.find_element_by_xpath('//a[@class="author size-m workspace-trigger"]//*[local-name()="svg"]').click()
                except (NoSuchElementException, TimeoutException, WebDriverException):
                    continue
        driver.back()
        driver.back()
    else:
        driver.back()

问题是我需要将卡主体放在图像的顶部-我知道如何将其放置在图像上，但是无论尝试什么，我似乎都无法摆脱多余的空白。

Answer 1

使用您的代码，我可以添加一些CSS规则来使其工作，请让我知道它是否对您有效！边框仅供您查看每个元素使用的空间

.card{
	border: 1px solid red;
}

.card-img-top {
	border: 1px solid green;	
}
.card-body{
	position: absolute;
	padding:0px !important;
	background-color:#3B9F2F;
	color: #FFF;
	border: 1px solid blue;
	width: 100%;
	top: 60%;
}

.right-cards {
  border: 1px solid yellow;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="container">
  <div class = row>
     <div class="right-cards col-lg-3 col-md-6 col-sm-6 col-6">
         <div class="card " id="first-card">
            <a id="first_card_btn" class="btn-none"  onclick="myFunction(this.id)"></a>
            <img class="card-img-top" src="https://via.placeholder.com/370" alt="Card image cap">
            <div class="card-body">
                <h4>Contact us </h4>
            </div>
         </div>
     </div>
</div>

Bootstrap 4卡组件删除不必要的空格

1 个答案: