Question

对表单进行对齐存在问题......

这是我想要做的...... 在左边和右边做一个联系表格，放上公司的标志..

因此，在第一个div上制作了两个col-md-6 div。我正在使用“form-horizontal”类的形式

因此我在“col-md-2”中安排表格标签，并在“col-md-4”中填写表格

然而，那些表格标签和字段并排出现......检查图像......

enter image description here

这是代码......

<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>

请帮助人们，即将关闭我的第一个网页设计项目：）

Answer 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>

Answer 2

您不需要为您的表单和图像制作容器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>

表格调整问题|引导

2 个答案: