Question

我遇到的问题是让顶部间隙与项目之间左右间隙的距离相匹配。如何使顶部间隙变窄，以便与每个引导按钮的左右间隙保持一致？

HTML

    <div ng-controller="RecipeController">
    <div class="row">
    <div class="col-md-offset-5">
<form class="form-inline">
  <input ng-model="query" type="text" class="form-control"
    placeholder="Search Chicken Recipes" autofocus>
</form>

    <div class="row">

        <div ng-repeat="recipe in ChickenRecipes | limitTo: -16 | filter:query | orderBy: 'name' ">
            <div class="col-md-3">
                <div class="row top-buffer"> </div>

                <button class="btn btn-primary btn-lg" ng-click="open(recipe)"><img ng-src="{{recipe.image}}" alt="recipeImage" class="recipeImage"/><br>{{ recipe.name }}</button> <br />
            </div>  
        </div>

          </div>
    </div><!--end recipeController-->


</div><!--end container-->

app.css

#header{

font-family: Century Gothic, sans-serif;
    color:red;
    margin-left:auto;
    margin-right:auto;
    width:70%;

font-weight:bold;

    font-size:30px;
    }


.row{

  margin:0 auto;

}

.hrstyle { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 4x 0 0 0; 
  border-radius: 40px; 
} 
.hrstyle:before { 
  display: block; 
  height: 30px; 
  content: ""; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 4px 0; 
  border-radius: 40px; 
}

.links{
font-size:24px;
margin-top:-24px;
}
.col-md-4{  
  margin:0 auto;
  text-align:center;
 line-height: 1.2;
}


  /*Dialog CSS*/
.ng-modal-overlay {
  /* A dark translucent div that covers the whole screen */
  position:absolute;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000000;
  opacity: 0.8;
}
.ng-modal-dialog {
  /* A centered div above the overlay with a box shadow. */
  z-index:10000;
  position: absolute;
  width: 50%; /* Default */

  /* Center the dialog */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);

  background-color: #fff;
  box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
  padding:10px;
  text-align: left;
}
.ng-modal-close {
  position: absolute;
  top: 3px;
  right: 5px;
  padding: 5px;
  cursor: pointer;
  font-size: 120%;
  display: inline-block;
  font-weight: bold;
  font-family: 'arial', 'sans-serif';
}

.recipeImage{
width:240px;
height:180px;
margin-left:auto;
margin-right:auto;

}
.recipeImageModal{
width:240px;
height:180px;
margin-left:auto;
margin-right:auto;
float:left;

}

.top-buffer { margin-top:30px; }
h3{

  text-align:center;
  color:red;
  font-weight:bold;
}

h2{
  font-weight:bold;
  text-align:center;

}
ul
{
    list-style-type: none;
    font-weight:bold;

}
.modal-body{


  height:600px;

}
.ingredients{
font-weight:bold;

}
li{


}
.ingredientsTitle{
color:red;

}

Answer 1

检查以下代码。

.top-buffer {
   margin-top: 30px;
}

这会产生问题。

减少顶部行之间的差距

1 个答案: