2013-07-25 3 views
0

Есть ли у кого-нибудь идеи о том, как создать двухмодульную панель. Так, например, одна сторона будет формой входа или чем-то другим, а другая сторона будет списком пользователей. Или одна сторона будет физическим контактным информационным div, а другая сторона будет формой электронной почты. Я попытался сделать два div под модальным тегом div и иметь один pull-left другой pull-right с каждым span5 или span6, но это не сработало. Я спрашиваю, потому что у меня есть эта проблема. Также может ли кто-нибудь сказать мне, почему моя контактная форма имеет столько места между меткой и поле ввода? Перейдите на сайт scoopclassifieds.com (не пытайтесь подключить мой сайт, не можете публиковать фотографии) и нажмите на ссылку. Я поставил HTML размечать ударtwitter bootstrap - создание двух панелей modal

<div class="modal hide fade" id="contactForm" aria-hidden="true"> 
        <div class="modal-body"> 
           <form action="" method="post" class="form-horizontal"> 
      <div class="control-group"> 
       <label class="control-label">Email:</label> 
       <div class="controls"> 
        <input type="text" name="email" id="email" class="input" /> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label">Subject:</label> 
       <div class="controls"> 
        <input type="text" name="subject" id="subject" class="input" /> 
       </div> 
      </div> 
      <div class="control-group"> 
      <label class="control-label">Message:</label><br/><br/> 
       <div class="controls"> 
        <textarea rows="5" class="input span4" name="message" id="message"></textarea> 
       </div> 
      </div> 
      <div class="control-group"><div class="controls"><input type="submit" name="contactUs" id="contactUs" class="btn" value="Contact Us" /></div></div> 
         </form> 
        </div> 
       </div> 

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

+0

Можете ли вы предоставить какой-либо макет, чтобы понять дизайн .. в простой краске и кисти будет работать. – Rubyist

+0

вроде как страница входа ebay.com. Но вместо страницы входа в систему было бы мода входа – NSaid

+1

Я думаю, что я понимаю, что вам нужно, почему бы просто не добавить строку, а затем два 'span6', чтобы разделить вещи внутри этой области? – sulfureous

ответ

1

Попробуйте положить row-fluid внутри modal-body, а затем 2 span6 внутри, что ..

<div class="modal-body"> 
<div class="row-fluid"> 
    <form class="span6"> 
    </form> 
    <div class="span6"> 
    </div> 
</div> 
</div> 

Вы также можете захотеть увеличить ширину по умолчанию модального ..

.modal { 
    width:45%; 
    left:45%; 
} 

Demo на Bootply: http://bootply.com/69517

+0

Спасибо, что завтра я посмотрю. – NSaid

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