Question

我对使用引导程序是陌生的，我正在尝试使用左侧的图标和右侧的一些文本来自定义井。为此，我希望带有图标的div具有如下绿色背景：

我已经能够做到这一点，但是图标div上的绿色背景并未覆盖整个区域，这可能是由于某些填充问题所致。有人可以举例说明吗？到目前为止，我已经知道了：

这是html：

.well {
  border-radius: 5px;
  border: 1.5px solid #D3D9E3;
  box-shadow: inset 0 0 10px 0 rgba(185, 194, 208, 0.41);
  margin: 30px 0;
  padding: 20px 15px;
  .well-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  background-color: white;
  .well-icon {
    margin-right: 20px;
    //background-color: #98DDA6;
    img {
      width: 100px;
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-sm-10 col-sm-offset-1">
    <div class="well well-graphic">
      <div class="well-icon hide-xs col-sm-2">
        <svg class="icon icon-magnifying-glass-search">
                 <use xlink:href="../assets/img/icons/symbol-defs.svg#icon-magnifying-glass-search"></use>
                    </svg>
      </div>
      <div class="col-sm-10">
        <div class="well-text well-color">
          <p>The .well-graphic class is used for Callout Boxes w/ icon.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

谢谢。

Answer 1

我在html和css文件中做了一些更改。您可能需要更改一些边距，因为我没有照片。但是背景对我有好处，我也希望对你有帮助;-）

HTML文件：

<div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="well well-graphic row">
                    <div class="well-icon hide-xs col-sm-2">
                        <svg class="icon icon-magnifying-glass-search">
                            <use xlink:href="../assets/img/icons/symbol-defs.svg#icon-magnifying-glass-search"></use>
                        </svg>
                    </div>
                    <div class="col-sm-10">
                        <div class="well-text well-color">
                            <p>The .well-graphic class is used for Callout Boxes w/ icon.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS文件：

.well {
  border-radius: 5px;
  border: 1.5px solid #d3d9e3;
  box-shadow: inset 0 0 10px 0 rgba(185, 194, 208, 0.41);
  margin: 30px 0;
  padding: 0px;
}
.well-text {
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-align: center;
  margin-top: 50px;
}
.well {
  margin: 15px 0;
  background-color: white;
  border: 1.5px solid #d3d9e3;
}
.well-icon {
  background-color: #98dda6;
}

带有良好引导程序3中的文本的图标

1 个答案: