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边缘错误？

回答

相关问题