Question

<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post">
    <div class="form-group">
      <label class="control-label col-sm-2 lb" for="email">Email : </label>
      <div class="col-sm-6">
        <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Subject : </label>
      <div class="col-sm-6">          
        <select class="form-control col-sm-6 lb" id="subj" name="subject" required>
            <option>General queries</option>
            <option>Group and corporate bookings</option>
            <option>Suggestion and complaints</option>
        </select>
      </div>
    </div>
    <div class="form-group">        
      <label class="control-label col-sm-2 lb" for="pwd">Message : </label>
      <div class="col-sm-6">
        <div class="checkbox">
          <textarea class="form-control" id="message" name="message" required></textarea>
        </div>
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-4 col-sm-6">
        <button type="submit" class="btn btn-success">Submit</button>
      </div>
    </div>
  </form>

这是我的表格。它工作正常。问题是我正在使用bootstrap，我希望所有内容都在完美的中心响应屏幕大小。请帮我解决一下这个。谢谢！

Answer 1

我不知道，不管我说的是否正确。

如果我们使用css，

text-align:center;

垂直和水平对齐中心会受到影响。

所以特定的垂直对齐中心没有css。

Answer 2

您需要更改下拉文字和其他

<div class="panel panel-warning mypanel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
 <div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" 
    placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">Subject</label>
<div class="col-sm-10">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
     data-toggle="dropdown">
      Topics
<span class="caret"></span>
</button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Java</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Data Mining</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">
            Data Communication/Networking
         </a>
      </li>
      <li role="presentation" class="divider"></li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Separated link</a>
      </li>
   </ul>
</div>
      </div>
   </div>
    <div class="form-group">
      <label for="firstname" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="firstname" 
            placeholder="Enter First Name">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">Sign in</button>
      </div>
   </div>
</form>

   </div>
</div>

希望这个表格完美居中

2 个答案: