減少排之間的差距

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

這就產生了問題。