/ / Искате тази форма в идеален център - html, css, twitter-bootstrap

Искате тази форма в идеалния център - html, css, twitter-bootstrap

<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 и аз искам всичко в перфектния център отговаря на размера на екрана. Моля, помогнете ми с това. Благодаря!

Отговори:

0 за отговор № 1

Не знам дали казвам правилно или не.

Ако използваме css като,

text-align:center;

Тя ще бъде повлияна центриране както вертикално, така и хоризонтално.

Така че не съществува css за определен център за вертикално подравняване.


0 за отговор № 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>

Свързани въпроси


Коментари (0)

Добави коментар