Bootstrap 3 макета: форма рушится слишком рано

Я хотел бы получить следующую компоновку моей формы с помощью начальной загрузки:Bootstrap 3 макета: форма рушится слишком рано

Working on [Select field] [Select Button]

Итак: все элементы находятся в одной строке (есть много свободного пространства для этого).

Но когда я уменьшить ширину моего браузера переключатели страниц в странном макете, как только она достигает 767 пикселей в ширину:

Working on 

[Select field expanding over the whole row] 

[Select Button]

Хотя есть, очевидно, еще много места, чтобы держать форму на один ряд. Есть ли (возможно, простой) способ предотвратить распространение этой формы на несколько строк?

Я скопировал ниже страницы HTML, используемый для проверки поведения описано выше:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Test</title> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen"> 
</head> 
<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6 pull-left"> 
      <a href="#"> 
      Test Page 
      </a> 
     </div> 
     <div class="col-sm-6 pull-right"> 
      You are logged in as [email protected] 
     </div> 
    </div> 

    <div class="row">   
     <form class="navbar-form navbar-left" role="search" action="#" method="post"> 
     <div class="form-group"> 

      <label for="id_field1" class="control-label">Working on</label> 
      <select class="form-control" id="id_field1" name="field1"> 
      <option value="1" selected="selected">Choice 1</option> 
      <option value="2">Choice 2</option> 
      <option value="3">Choice 3</option> 
      </select> 
     </div> 
     <button type="submit" class="btn btn-default">Select</button> 
     </form> 
    </div> 

    <div class="row"> 
     <div class="col-sm-12"> 
     Stuff will come here... 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-sm-12"> 
      <p>This is a footer</p> 
     </div> 
    </div> 
</div> 

</body></html>

Любая помощь и предложения оценены!

источник

2014-01-04 Christophe

В соответствии с [сеточных документы] (http://getbootstrap.com/css/#grid) с использованием 'Col-SM- *' будет ответно изменить к вертикали ниже 768px. – Terry

Вы правы Терри: это функция начальной загрузки, а не неисправность или проблема с представленным кодом ... Слишком плохо, что 768 пикселей в ширину является точкой останова по умолчанию для переключения на небольшие устройства, слишком широк, на мой взгляд ... Но это могут быть изменены в конфигурации bootstrap. – Christophe

Surround каждый элемент в строке с DIV, который имеет класс размера колонки (например, «Col-хз-2 «), например, так:

<div class="form-group"> 
    <div class="col-xs-2"> 
     <label for="id_field1" class="control-label">Working on</label> 
    </div> 
    <div class="col-xs-6"> 
     <select class="form-control" id="id_field1" name="field1"> 
      <option value="1" selected="selected">Choice 1</option> 
      <option value="2">Choice 2</option> 
      <option value="3">Choice 3</option> 
     </select> 
    </div> 

    <div class="col-xs-4"> 
      <button type="submit" class="btn btn-default">Select</button> 
    </div> 

</div>

пока вы используете„Col-хз -...“, каждая колонка на этой строке будет находиться в той же строке, даже на небольших устройствах. Here's a fiddle.

РЕДАКТИРОВАТЬ:

Изменение класс формы к «форме-горизонтальной» меняет форму-группы, чтобы вести себя как сетки строк (см this), что позволяет столбец проклейки оставаться последовательным во всех размеров отображения. Here's a new fiddle, отражающий это изменение.

источник

2014-01-06 19:20:32 ringstaff

Я все еще немного озадачен: в представленной вами скрипке вы заметили, как ярлык формы разрушается без уважительной причины при игре с размером кадра? Подумав об этом долгое время, я склонен думать, что это нормальное поведение бутстрапа, и, к сожалению, мы мало что можем сделать. – Christophe

@ Christophe - Я обновил свой ответ – ringstaff

Вы должны прочитать о том, как подвесная система работает в BS3, Bs3 grid system

краткое sumary является то, что у вас есть 12 столбцов в ширину экрана, и вы решите, сколько столбцов elemnt принимает, когда задав эти clases col-sm-12

это означает: (колонка) - (малый/средний устройство) - (будет принимать 12 столбцов)

, если вы используете осина, он имеет максимальную ширину в ваших Site.ccs так быть осторожным.

проверить это примеры bs3 forms

Я думаю, вы можете попробовать это:

<form class="form-inline" role="form"> 
    <div class="form-group"> 
    <label class="sr-only" for="exampleInputEmail2">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> 
    </div> 
    <div class="form-group"> 
    <label class="sr-only" for="exampleInputPassword2">Password</label> 
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> 
    </div> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox"> Remember me 
    </label> 
    </div> 
    <button type="submit" class="btn btn-default">Sign in</button> 
</form>

источник

2014-01-06 19:06:29

Я думаю, что я не был достаточно ясен с моими объяснениями ... В вашем exmpale тоже вы можете увидеть, как встроенная форма переключается в сложный режим при уменьшении вашего браузера wdth до менее чем 768 пикселей? Я потратил довольно много времени на docs и, действительно, получается, что то, что я считал ошибкой, на самом деле является особенностью бутстрапа ... В конце концов, это нормально, хотя я думаю, что переход на режим небольших устройств с разрешением 767 пикселей является немного преувеличением. – Christophe

Я не уверен, как это сделать, но, конечно, есть способ отображать в линейных формах на небольших устройствах, но если вы так думаете, это будет бессмысленно, так как эти поля будут действительно маленькими, скрипт работы @ringstaff взглянет на это опция. –

Приятно, что с вами все в порядке, так как это работает в Bootstrap, но я нет. На самом деле я стараюсь избегать элементов формы бутстрапа, где это поведение важно. I.e. У меня есть форма с двумя радиоприемниками и одним выпадающим списком, которые в xs все должны вписываться в одну строку. Я потратил целый день на то, чтобы найти решение, используя bootstrap, прежде чем отпустить загрузку для этой конкретной строки. Мне все же нужно получить один и тот же вид полей ввода с другими полями ввода (но это не то же поведение), так что я буду тратить следующие несколько часов, пытаясь найти совпадение для «form- контроль». Посмотреть этот код на XS-экране.

<label style="width:3.5rem;"><input class="form-control-sm" type="radio" id="Reds" name="xx" checked> Reds</label> 
<label style="width:3.5rem;"><input class="form-control-sm" type="radio" id="Blues" name="xx"> Blues</label> 
<select name="type" class="form-control form-control-sm" style="width:7rem;"> 
<option value='0' selected='selected'>Shirts</option> 
<option value='1'>Pants</option> 
<option value='2'>Socks</option> 
</select> 
<button name="Find" type="submit" class="btn btn-g4 btn-sm">Find</button>

источник

2016-10-21 17:24:12 GreenFreddy

Bootstrap 3 макета: форма рушится слишком рано

ответ

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