Проблемы с выравниванием бутстрапа Twitter

Question

Я делаю мобильное приложение, используя Twitter Bootstrap для обработки пользовательского интерфейса. Кроме того, я использую font-awesome и flat-ui.

Мои проблемы:

1. Может не по вертикали Выравнивание заголовка изображения с IMG-отзывчивым значок
2. Параметры погасла страницы

Когда я просмотра страница в большом окне, расстояние в порядке; например:

Теперь, когда окно усадку (до размера, что отображается на мобильном устройстве), я начинаю испытывать проблемы. Пример:

А вот ограничивающими коробки, чтобы сделать его немного более очевидным:

EDIT:

проблема

Vertical Alignment решена с использованием фиксированных полей и Максимальная ширина.

Икона проблема все еще остается.

HTML

<div class="container"> 
    <br /> 
    <br /> 
    <div class="row">   
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <a class="btn btn-inverse" href="#"><i class="fa fa-home fa-2x"></i> </a> 
      </div> 
      <div id="logo" class="col-xs-8 col-sm-8 col-md-8 col-lg-8"> 
       <img src="images/example.png" alt="example" class="img-responsive"> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <a class="btn btn-inverse" href=".\options.html"><i class="fa fa-cogs fa-2x"></i></a> 
      </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
      <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
       <a class="btn btn-primary" href=".\1.html">Link 1</a> 
      </div> 
      <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3">  
       <a class="btn btn-primary" href=".\2.html">Link 2</a> 
      </div> 
      <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
       <a class="btn btn-primary" href=".\3.html">Link 3</a> 
      </div> 
      <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
       <a class="btn btn-primary" href=".\4.html">Link 4</a> 
      </div> 
     </div> 
    </div> 
    <br /> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
      <img src="images/image.jpg" alt="image" class="img-rounded img-responsive"> 
      <br /> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <a href=".\start.html" class="btn btn-block btn-lg btn-primary">START</a> 
     </div> 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <a href=".\fav.html" class="btn btn-block btn-lg btn-fav">FAVORITE</a> 
     </div> 
    </div> 
    <hr> 
</div> 
<!-- Container --> 

CSS

body { 
    text-align:center; 
    background-color: #1E1E1E; 
    color: #D8D8D8; 
} 

.row-coloured { 
    /* Green background */ 
    background-color: #29591D; 
} 

.centered { 
    vertical-align: middle; 
    text-align: center; 
} 

.btn-fav { 
    background: #5f774e; 
    border-color: #eaf2ea; 
} 

.btn-fav:hover { 
    background: #789463; 
    border-color: #eaf2ea; 
} 

@media only screen 
and (max-width : 768px) { 

    #logo img { 
    width: 200px; 
    height: auto; 
    margin: 16px auto; 
    } 

} 

.col-xs-2 > a { 
    display: inline-block; 
    margin: 6px 0; 
} 

Любые идеи о том, как предотвратить это /, почему это происходит? Я чувствую, что пробовал 50 вещей без какого-либо прогресса.

Answer 1

Я думаю, что согласно документации начальной загрузки .col- элементы должны быть незамедлительными детьми row элементов.Вы должны исправить следующее:

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
     <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"><!--this--> 
      <a class="btn btn-primary" href=".\1.html">Link 1</a> 
     </div> 
     <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"><!--this-->  
      <a class="btn btn-primary" href=".\2.html">Link 2</a> 
     </div> 
     <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"><!--this--> 
      <a class="btn btn-primary" href=".\3.html">Link 3</a> 
     </div> 
     <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"><!--this--> 
      <a class="btn btn-primary" href=".\4.html">Link 4</a> 
     </div> 
    </div> 
</div> 

Попробуйте обертывание элементов, которые производят отступы внутри детей дивов этих .col- элементов, как это:

<div class="row">   
     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
      <div class="topwrappers"><!-- like this --> 
      <a class="btn btn-inverse" href="#"> 
       <i class="fa fa-home fa-2x"></i> 
      </a> 
      </div> 
     </div> 
     <div class="img2 col-xs-8 col-sm-8 col-md-8 col-lg-8"> 
      <div class="topwrappers" id="topcenter"><!-- like this --> 
      <img src="images/example.png" alt="example" class="img-responsive"> 
      </div> 
     </div> 
     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
      <div class="topwrappers"><!-- like this --> 
      <a class="btn btn-inverse" href=".\options.html"> 
       <i class="fa fa-cogs fa-2x"></i> 
      </a> 
     </div> 
    </div> 
    <!--And so on for the rest.--> 

Также попробуйте удалить паразитную <br/> и <hr/> между дивой тогда удалить это из вашего css, поскольку я думаю, что это испортит сетку:

.col-xs-8 .col-sm-8 .col-md-8 .col-lg-8 { 
    float:none; 
    display:inline-block; 
    vertical-align:middle; 
    margin-right:-4px; 
} 

и добавить это:

.topwrappers{ 
    width:100%; 
    height:100%; 
} 

#topcenter{ 
    text-align:center; 
} 

Answer 2

Это происходит потому, что .img-responsive класс делает изображение имеет максимальную ширину 100%. Высота изображения затем масштабируется с этим, поэтому он не такой высокий, как это было.

Вы можете установить размер пикселя для логотипа на меньших устройствах с использованием медиа-запросов, а затем установить верхнюю границу поля, чтобы перестроить его значками. (обратите внимание, что я добавил идентификатор #logo ниже).

@media only screen 
and (max-width : 768px) { 

    #logo img { 
    width: 200px; 
    height: auto; 
    margin: 12px auto; 
    } 

} 

Иконки уходят, потому что они имеют .btn класс, который имеет padding: 6px 12px. На небольшом устройстве, что обивка вызывает элемент шире, чем это контейнер (col-xs-2 поэтому они переполнены их контейнер. Вы можете удалить .btn .btn-inverse класс, а затем настроить стили на ваши иконки с помощью CSS.

.col-xs-2 > a { 
    display: inline-block; 
    margin: 6px 0; 
} 

DEMO

---

EDIT

Как упоминалось в его ответах, не смешивайте стили сетки. Удалите блок кода, где вы устанавливаете столбцы, которые должны быть inline-block, как они сказали.