html - 无法在简单的引导页面上的图像框外获取标题

Question

我有一个简单的页面，我在其中的阴影框中显示 Logo 和标题。

问题是我无法获得阴影框外的标题。

这是页面的演示

.name {
	color: #1b1a1a;
  margin-top: 45px;
	font-size: 16px;
	text-align: center;
}

.shadow {
    padding: 30px;
    margin-right: 60px;
    box-shadow: 4px 5px 13px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}

.shadow img {
	margin: 0 auto;
}

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">    
    <div class="row equal">
            <div class="col-md-2 shadow">
              <img src="https://res-1.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_120,w_120,f_auto,b_white,q_auto:eco/v1483512777/dexdvfcyzuywzztqilod.png" class="img-responsive" alt="Image">
              <div class="name">Cambian networks</div>
            </div>
            <div class="col-md-2 shadow"> 
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Anbox_logo.png/120px-Anbox_logo.png" class="img-responsive" alt="Image"><br/>
              <div class="name"><p>Android</p></div>
            </div>
    </div>
</div>

我希望 Cambian 网络 和 Android 不在(下面)框内。

这里还有Jsfiddle demo https://jsfiddle.net/7j9usa05/

Answer 1

从父级移除阴影并将其赋予 img 标签。那应该可以解决您的问题。

.name {
  color: #1b1a1a;
  margin-top: 45px;
  font-size: 16px;
  text-align: center;
}

.shadow {
  padding: 10px;
  /* margin-right: 60px; */
  box-shadow: 4px 5px 13px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}

.shadow img {
  margin: 0 auto;
}

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row equal">
    <div class="col-md-2">
      <img src="https://res-1.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_120,w_120,f_auto,b_white,q_auto:eco/v1483512777/dexdvfcyzuywzztqilod.png" class="img-responsive shadow" alt="Image">
      <div class="name">Cambian networks</div>
    </div>
    <div class="col-md-2">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Anbox_logo.png/120px-Anbox_logo.png" class="img-responsive shadow" alt="Image">
      <div class="name">
        <p>Android</p>
      </div>
    </div>
  </div>
</div>