Модальный диалог с горизонтальной формой, бок о бок группы

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

<table>
 <tbody><tr>
 
 
 
 </tr>
</tbody></table>

Поэтому, используя пример модального диалога в документации Bootstrap 3 в сочетании с формально-горизонтальным экзаменом в документации по Bootstrap 3, а также с использованием диапазона, чтобы попытаться сделать 50-процентную ширину для каждого (и, надеюсь, слева направо разбиение разделов), Я вышел с:

<div id="addModal" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true"><code>&lt;div&gt;
 &lt;div&gt;
 &lt;div&gt;
 &lt;button type="button" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
 &lt;h4 id="addLabel"&gt;Title of Dialog&lt;/h4&gt;
 &lt;/div&gt;
 &lt;form role="form"&gt;
 &lt;div&gt;
 &lt;div&gt;
 &lt;div&gt;
 &lt;div&gt;
 &lt;label for="inputUser"&gt;User&lt;/label&gt;
 &lt;div&gt;
 
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label for="inputPassword3"&gt;Password&lt;/label&gt;
 &lt;div&gt;
 
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;div&gt;
 &lt;div&gt;
 &lt;label&gt;
  Remember me
 &lt;/label&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;div&gt;
 &lt;label for="inputUser"&gt;User&lt;/label&gt;
 &lt;div&gt;
 
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label for="inputPassword3"&gt;Password&lt;/label&gt;
 &lt;div&gt;
 
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;div&gt;
 &lt;div&gt;
 &lt;label&gt;
  Remember me
 &lt;/label&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 &lt;/div&gt;
 &lt;div&gt;
 &lt;button type="button" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
 &lt;button type="submit"&gt;Add Request&lt;/button&gt;
 &lt;/div&gt;
 &lt;/form&gt;
 &lt;/div&gt;
&lt;/div&gt;</code>  <p> <a href="http://jsfiddle.net/isherwood/3zeMh/rel=nofollow" rel="nofollow noreferrer" target="_blank">http://jsfiddle.net/isherwood/3zeMh/</a></p> <p> Проблема в том, что где-то на этом пути он заставляет каждый элемент перейти на новую строку, поэтому у меня есть две "формы", которые составляют 50% от ширины родителя (намеренно), которые отображаются вертикально (не преднамеренно). Как я могу сделать оба рендеринга бок о бок?</p> </div>
1 ответ

<div> <p> должно быть</p> <pre class="prettyprint linenums"><div> <p> 2 раза.</p>


 <p> <a href="http://jsfiddle.net/isherwood/3zeMh/4" rel="nofollow noreferrer" target="_blank">http://jsfiddle.net/isherwood/3zeMh/4</a></p> <p> Это требует немного дополнительной очистки, но это основная проблема. Здесь возможно одно из возможных уточнений: <a href="http://jsfiddle.net/isherwood/3zeMh/6" rel="nofollow noreferrer" target="_blank">http://jsfiddle.net/isherwood/3zeMh/6</a></p> <p> Я бы, вероятно, расширил эти ярлыки и сохранил все блоки для мобильных устройств.</p> </div>

licensed under cc by-sa 3.0 with attribution.