bootstrap和ms邊緣錯誤？

-3

我已創建網站（bootstrap）。在鉻/火狐等工作，但邊緣我有問題。底部有look at this page，有4個按鈕。當他們徘徊時，他們移動並且不回到正常位置。我在網上搜索，但找不到有關此錯誤的任何信息。或者這是我的錯誤代碼？你怎麼看？bootstrap和ms邊緣錯誤？

代碼如下

#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>

來源

2016-10-01 maw2be

發佈您的相關代碼。 –

你需要在這裏創建一個[mcve]你的問題。如果你只是鏈接一個網站，沒有人會理解你修復後出現的問題，對任何遇到同樣錯誤的人都沒有任何價值。此外，從簡單的角度來看，它看起來還不熟悉Bootstrap，並且在實現其實用程序類時沒有注意細節。不過，我可能是錯的。 –

對不起，我的錯誤。我添加代碼。 – maw2be

所以我找到原因，我邊放。在#bottom_fourth_row [class*="col-"] 我刪除：

float: none; 
display: table-cell;

，並添加：

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

這幫助解決這個問題。

有趣的是，這只是與Edge。

來源

2016-10-02 19:11:39 maw2be

bootstrap和ms邊緣錯誤？

回答

相關問題