сетка начальной загрузки выравнивает элементы по горизонтали

У меня есть быстрый вопрос о Bootstrap Grid.

Если у меня есть следующий код:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-2">
                    Some header here
                </div>
                <div class="col-md-8">
                    <input type="text" class="input-small" />
                    <input type="submit" value="ok" />
                </div>
            </div>
        </div>
    </div>        
</div>

Как бы вы переместили поле ввода влево, чтобы оно имело отступ около 5 пикселей от моего текста «Заголовок»?

Мой div с текстом, очевидно, имеет ширину, поэтому я не могу просто подтянуть ввод ближе к тексту. Я мог бы изменить класс на col-md-1, но тогда мой текст был бы вынужден занимать две строки.

Я установил скрипт здесь: http://jsfiddle.net/62kLr/ Возможно, вам придется изменить размер окно, чтобы правильно увидеть выравнивание.

/BR Мартин


alignment twitter-bootstrap twitter-bootstrap-3 grid
person user2132222    schedule 28.02.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете использовать label вместо отдельного столбца...

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-10">
                    <label>Some header here</label>
                    <input type="text" class="input-small">
                    <input type="submit" value="ok">
                </div>
            </div>
        </div>
    </div>        
</div>

http://www.bootply.com/117582

person Zim    schedule 28.02.2014
comment
Конечно! Большое спасибо за совет :) Иногда вам просто нужно, чтобы кто-то еще посмотрел на проблему. - person user2132222; 28.02.2014

arrow_upward
0
arrow_downward

Попробуйте использовать функции col-sm-2 , col-xs-2 в вашей сетке.

<div class="container">
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="row">
            <div class="col-md-3 col-sm-3 col-xs-3">
                Some header here
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                <input type="text" class="input-small" />
      <input type="submit" value="ok" />
            </div>
        </div>
    </div>
  </div>        
</div>
person Balayesu Chilakalapudi    schedule 28.02.2014
comment
col-md предназначен для экранов среднего размера, используйте col-xs для устройств с маленьким экраном. данный код является рабочим кодом. - person Balayesu Chilakalapudi; 28.02.2014