ブートストラップとmsエッジバグ？

Question

私はウェブサイト（ブートストラップ）を作成しています。クロム/ファイアフォックスなどで動作していますが、エッジに問題があります。下部にlook at this pageのボタンが4つあります。彼らが動いたとき、彼らは移動し、正常な位置に戻らない。 オンラインで検索していますが、このエラーについては何も見つかりません。それとも私の間違ったコードですか？どう思いますか？

#bottom_fourth_row { 
 
    display: table; 
 
    margin-top: 15px; 
 
} 
 

 
#bottom_fourth_row [class*="col-"] { 
 
    float: none; 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    position: relative; 
 
    padding-bottom: 45px; 
 
    /*display: table-cell; 
 
    vertical-align: top; 
 
    position: relative; 
 
    padding-bottom: 45px;*/ 
 
} 
 

 
#bottom_fourth_row>.col-sm-3>img {} 
 

 
#bottom_fourth_row>.col-sm-3>h3 { 
 
    font-family: avenir_light; 
 
    height: 50px; 
 
    text-align: left; 
 
    color: #027a9e; 
 
    padding: 0; 
 
    font-size: 22px; 
 
    font-weight: bold; 
 
} 
 

 
#bottom_fourth_row>.col-sm-3>h4 { 
 
    font-family: avenir_light; 
 
    text-align: left; 
 
    padding: 0; 
 
    color: #7d7d7d; 
 
    font-size: 18px; 
 
    line-height: 1.3em; 
 
} 
 

 
#bottom_fourth_row [class*="col-"] button { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 20px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 90px; 
 
    height: 40px; 
 
    background-color: #2aa3c3; 
 
    font-family: basic; 
 
    font-size: 20px; 
 
    color: #ffffff; 
 
} 
 

 
#bottom_fourth_row [class*="col-"] button>a, 
 
#bottom_fourth_row [class*="col-"] button>a:focus, 
 
#bottom_fourth_row [class*="col-"] button>a:hover, 
 
#bottom_fourth_row [class*="col-"] button>a:visited { 
 
    color: #ffffff; 
 
}

<div class="row" id="bottom_fourth_row"> 
 
         <div class="col-xs-12 col-sm-3"> <img src="http://placehold.it/350x150"> 
 
          <h3>text</h3> 
 
          <h4>text</h4> 
 
          <form> 
 
           <div class="form-inline"> 
 
            <input type="text" name="email" id="email" placeholder="Email" /> 
 
            <input type="hidden" name="list" value="wgPkaIHO7pFCp9G65wvXXw" /> 
 
            <button type="submit" name="submit" id="submit" class="btn">submit</button> 
 
           </div> 
 
          </form> 
 
         </div> 
 
         <div class="col-xs-12 col-sm-3"> <img src="http://placehold.it/350x150"> 
 
          <h3>text</h3> 
 
          <h4>text</h4> 
 
          <button class="btn"><a href="#">more</a></button> 
 
         </div> 
 
         <div class="col-xs-12 col-sm-3"> <img src="http://placehold.it/350x150"> 
 
          <h3>text</h3> 
 
          <h4>text</h4> 
 
          <button class="btn"><a href="#">more</a></button> 
 
         </div> 
 
         <div class="col-xs-12 col-sm-3"> <img src="http://placehold.it/350x150"> 
 
          <h3>text</h3> 
 
          <h4>text</h4> 
 
          <button class="btn"><a href="#">more</a></button> 
 
         </div> 
 
        </div>

Answer 1

以下

コードは、だから私は、エッジは私と一緒に遊ぶ理由を発見しました。

float: none; 
display: table-cell; 

および追加：

display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display:   flex; 

この問題とこのヘルプ私は削除#bottom_fourth_row [class*="col-"] で 。

これはEdgeとだけ面白かったです。