对表单进行对齐存在问题......
这是我想要做的...... 在左边和右边做一个联系表格,放上公司的标志..
因此,在第一个div上制作了两个col-md-6 div。我正在使用“form-horizontal”类的形式
因此我在“col-md-2”中安排表格标签,并在“col-md-4”中填写表格
然而,那些表格标签和字段并排出现......检查图像......
这是代码......
<section id="contact">
<div class="col-md-12 text-center" style="background-image: url('images/head-background.png'); height: 100px; margin: 120px 0 10px 0;"><h2 style="margin-top:40px;">Contact Us</h2></div>
<div class="col-md-6">
<div style="font-family:'MV Boli'; font-size: 20px;">
<h4>Reach Us</h4>
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-4">
<input type="text" name="name" placeholder="Your name" class="form-control">
</div>
<label for="email" class="col-md-2 control-label">E-Mail</label>
<div class="col-md-4">
<input type="email" name="email" placeholder="Your E-Mail" class="form-control">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<img src="images/logo-vertical.png" class="img-thumbnail">
</div>
<section>
请帮助人们,即将关闭我的第一个网页设计项目:)
答案 0 :(得分:1)
我认为这是你的需要,请试试这个,这不是你的需要请给我明确的意见,
<section id="contact">
<div class="col-md-12 text-center" style="background-image: url('images/head-background.png'); height: 100px; margin: 120px 0 10px 0;"><h2 style="margin-top:40px;">Contact Us</h2></div>
<div class="col-md-6">
<div style="font-family:'MV Boli'; font-size: 20px;">
<h4>Reach Us</h4>
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-12">
<input type="text" name="name" placeholder="Your name" class="form-control">
</div>
<label for="email" class="col-md-2 control-label">E-Mail</label>
<div class="col-md-12">
<input type="email" name="email" placeholder="Your E-Mail" class="form-control">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<img src="images/logo-vertical.png" class="img-thumbnail">
</div>
<section>
答案 1 :(得分:0)
您不需要为您的表单和图像制作容器col-md-12。只需制作相同的结构
<div class="container">
<div class="row">
<div class="col-md-6">
form here
</div>
<div class-"col-md-6">
// your image
</div>
</div>
</div>