bootstrap и ms edge bug?

-3

Я создал сайт (бутстрап). На chrome/firefox и т. Д. Работает, но на грани у меня проблема. look at this page внизу, есть 4 кнопки. Когда они зависали, они двигались и не возвращались в нормальное положение. Я ищу в Интернете, но ничего не могу найти об этой ошибке. Или это мой неправильный код? Как вы думаете?bootstrap и ms edge bug?

Код ниже

#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 edge bug?

ответ

Смежные вопросы