Как выравнивать компонент горизонтально с помощью бутстрапа?

Question

Я использовал ниже bootstrap на странице поиска.

Фактически я хочу этот тип экрана в разрешении 1024 * 768.

Разрешение экрана: 1360 * 768

Но это не работает ниже разрешения.

Разрешение экрана: 1024 * 768

Здесь используется мой загрузочный код класса:

<div class=" col-xs-12 col-md-12 col-lg-12"> 
        <div class="box"> 
         <div class="box-body"> 
          <x:form class="form-vertical" role="form"> 
           <div class="form-group col-lg-8"> 
            <textbox value="@bind(vm.searchValue)" 
             sclass="form-control" onOK="@command('doSearch')" 
             tooltiptext="${vm.getText('PeopleDetail:LABEL_SEARCH')}" 
             placeholder="${vm.getText('PeopleDetail:LABEL_SEARCH')}"> 
            </textbox> 
           </div> 

           <div class="form-group col-lg-4"> 
            <x:button type="submit" 
             class="btn btn-inverse" value="search" 
             onClick="@command('doSearch')" accesskey="s" 
             title="${vm.getText('PeopleDetail:BUTTON_SEARCH')}"> 
             ${vm.getText('PeopleDetail:BUTTON_SEARCH')} 
            </x:button> 
            <x:button type="submit" 
             style="margin-left:20px;" class="btn btn-inverse" 
             value="search" onClick="@command('clearQuery')" 
             title="${vm.getText('PeopleDetail:BUTTON_CLEAR')}"> 
             ${vm.getText('PeopleDetail:BUTTON_CLEAR')} 
            </x:button> 
            <span> 
             <x:a href="#" accesskey="q" 
              onClick="@command('showQueryPage')" style="margin-left:20px;" 
              title="${vm.getText('PeopleDetail:BUTTON_SEARCH')}"> 
              ${vm.getText('PeopleDetail:LABEL_ADVANCED_SEARCH')} 
             </x:a> 
            </span> 
           </div> 
          </x:form> 
         </div> 
        </div> 
       </div> 

Answer 1

В вашем текущем разрешении вам понадобится класс «col-md- *» для стилей.

Вы можете увидеть Bootstrap медиазапросы здесь: http://getbootstrap.com/css/#grid-media-queries

** Кроме того, вы можете закрепить "Col-хз-12 цв-й мкр-12 цв-LG-12" на "Col-XS-12" поскольку bootstrap читает от малого до большого. (Фактически, вы, вероятно, могли бы обойтись без того, чтобы col - * - 12 был по умолчанию, но в случае, если вы будете меняться по дороге, это может быть полезно для менее опытного разработчика.)

Ниже вы можете увидеть классы и размеры, копировать/вставлять с http://getbootstrap.com/css/#grid-media-queries для вашего удовольствия.

---

/* Маленькие устройства (таблетки, 768px и выше) */ @media (мин-ширина: @ трафаретная см-мин) {...}

/* Средние устройства (настольные компьютеры , 992px и выше) */ @media (мин-ширина: @ трафаретная мкр-мин) {...}

/* большие устройства (большие настольные компьютеры, 1200px и выше) */ @media (мин -width: @ screen-lg-min) {...}

Answer 2

вы можете заменить Col-Л.Г. классы Col-Md классы. Он будет работать нормально. Ниже 1024 * 768 вы можете добавлять классы col-xs или col-sm, чтобы разбить его один за другим.

Answer 3

Измените код в

<div class="form-group col-md-8 col-lg-8"> 
<div class="form-group col-md-4 col-lg-4"> 

в соответствующих строках в form-group классах. Обратите внимание, что я добавил col-md-x для класса группы форм