html - Bootstrap 和 CSS 帮助，如图中所示

Question

我努力使代码像 中那样但成功了。 我不知道如何让那个绿色按钮同时具有白色 + gary 边框。两个背景之间必须有距离，但我没有。 另外，我不确定我输入代码的方式是否正确。有人请帮帮我。

HTML:

.vous-voulez {
  background-color: #DFE3E4;
}
.vous-voulez-button {
  background-color: #DFE3E4;
  margin: 10px;
}
.recherche {
  background-color: #DFE3E4;
  margin: 10px;
}
.text-p,
.vous-voulez {
  margin-top: 40px;
}

<div class="vous-voulez ">
  <div class="row">
    <div class="vous-voulez-button col-sm-6">
      <h4>Vous voulez vendre votre bien rapidement?</h4>
      <button type="button" class="btn btn-success btn-block">Cliquez ici pour une annonce gratuitement!</button>
    </div>
    <div class="recherche col-sm-6">
      <h4>Recherche par numero de telephone</h4>
      <form>
        <div class="row">
          <div class="col-sm-9">
            <input type="text" class="form-control" id="usr" />
          </div>
          <div class="col-sm-3">
            <button type="button" class="btn btn-default active">CHERCHER</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="text-p">
  <div class="row">
    <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-9">
          <p>Cliquez sur l'une des icones suivantes pour masquer la recherche</p>
        </div>
        <div class="col-sm-3">
          <button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="false"></span>
          </button>
          <button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
          </button>
          <button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
          </button>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-9">
          <p>Aimeriez-vous promouvoir votre actiuvite ou produit? <a href="#">Consultez nos tarifs</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

请试试这个代码，这会对你有帮助

.btn-success {
    color: #fff;
    background-color: #023014;
    border-color: #fff;
    border-width: 3px;
    border-radius: 0;
    box-shadow: 0px 0px 0 3px #5f5f5f;
}