带有左右元素的引导表单样式

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>

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

目前还没有任何 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 即可获得所需的设计。