上部の行間の隙間を小さくする

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; 
} 

これは問題を引き起こします。