引导形式样式与左右元素

Question

好。我正在尝试重新创建此表单，特别是使用尽可能多的默认引导程序样式。

我遇到的问题是左右两侧像这样。

我正在为深色背景使用Modal类。

<div class="panel-footer modal_custom">
    <div class="container">
        <h2>Talk to us</h2>
        <h4>What's on your mind?</h4>
        <form action="" role="form">
            <div class="form-group col-lg-3">
                <label for="form-elem-1"> Name</label>
                <input type="text" id="form-elem-1" class="form-control" placeholder="Enter Your name" />
            </div>
            <div class="form-group col-lg-3">
                <label for="form-elem-2"> Telephone</label>
                <input type="text" id="form-elem-2" class="form-control" placeholder="Enter Your telephone number" />
            </div>
            <div class="form-group col-lg-3">
                <label for="form-elem-3"> Email</label>
                <input type="text" id="form-elem-3" class="form-control" placeholder="Enter Your e-mail" />
            </div>
            <div class="form-group col-lg-3">
                <label for="form-elem-4"> Company</label>
                <input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your company name" />
            </div><br />
            <div class="form-group>
                <label for="form-elem-4"> Enquiry</label>
                <input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your enquiry" />
            </div>
        </form>
    </div>
</div>

我对颜色和那些较小的东西不需要太多帮助。关于如何将查询定位到右侧并使其看起来尽可能接近示例。

还没有任何css会影响上面的大部分代码。而且我对fomr功能失败了。我怎样才能让表格真正起作用。

Answer 1

这是你需要的，现在你已经为按钮和背景添加了一些样式

<div class="panel-footer modal_custom">
  <div class="container">
    <h2>Talk to us</h2>
    <h4>What's on your mind?</h4>
    <form action="" role="form">
      <div class="row">
        <div class="col-md-6 col-sm-6">
          <div class="form-group">
            <label for="form-elem-1"> Name</label>
            <input type="text" id="form-elem-1" class="form-control" placeholder="Enter Your name" />
          </div>
          <div class="form-group">
            <label for="form-elem-2"> Telephone</label>
            <input type="text" id="form-elem-2" class="form-control" placeholder="Enter Your telephone number" />
          </div>
          <div class="form-group">
            <label for="form-elem-3"> Email</label>
            <input type="text" id="form-elem-3" class="form-control" placeholder="Enter Your e-mail" />
          </div>
          <div class="form-group">
            <label for="form-elem-4"> Company</label>
            <input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your company name" />
          </div>
        </div>
        <div class="col-md-6 col-sm-6">
          <div class="form-group">
            <label class="col-md-3" for="comment">Comment:</label>
            <div class="col-md-9">
              <textarea class="form-control" rows="13" id="comment"></textarea>
            </div>
          </div>
        </div>
       <div class="row">
        <div class="col-md-12 text-right">
          <div class="form-group">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
        </div>
       </div>    
      </div>
    </form>
  </div>
</div>

工作小提琴 http://jsfiddle.net/52VtD/9098/

Answer 2

尝试使用响应式表重新构建该表单。设置具有两列的表并获得所需的设计而无需更改CSS。