bootstrap grid подравнете елементите хоризонтално

Имам бърз въпрос относно 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 пиксела спрямо моя текст „Header“?

Моят div с текста очевидно има ширина, така че не мога просто да дръпна входа по-близо до текста. Бих могъл да променя класа на col-md-1, но тогава текстът ми ще бъде принуден на два реда.

Настроих цигулка тук: http://jsfiddle.net/62kLr/ Може да се наложи да промените размера вашия прозорец, за да видите правилно подравняването.

/БР Мартин


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