html - 表单输入元素大小调整

Question

我想制作一个两列布局表单。但我遇到了一个问题，即表单的输入元素在大小(宽度)和响应方面的分配不均。我希望它能够响应并且宽度与它们之间的间隙相等。

下面附上代码

@import url('https://fonts.googleapis.com/css?family=Montserrat');

h2 {
  font-family: Montserrat;
  font-size: 3em;
  line-height:50px;;
}
form {
  width:70%;
  margin: 10% auto;
}
input[type="text"]{
  display: block;
  height: 30px;
  width: 47%;
  float:left;
}
form > input:nth-child(3){
  margin-left: 31px;
  margin-right:0;
}
textarea {
  width:100%;
  box-sizing: border-box;
  margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
  padding: 10px;
  letter-spacing: 5px;
  font-family: Montserrat;
}
textarea[placeholder="Message"]{
  letter-spacing:5px;
  padding: 10px;
  font-family: Montserrat;
}
/*
input , textarea {
  border-width: 0 0 2px 0;
  border-color: #000;
}*/
form input,textarea:focus {
  outline:none;
}

<section id="contact-page">
  
  <form>
  <h2>Contact Us</h2>
  <input type="text" placeholder="Name">
   
  <input type="text" placeholder="E-mail">
   
  <textarea name="message" placeholder="Message" rows="6"></textarea>
    
  </form>
</section>

Answer 1

试试这个

 <form>
    <div class="col-sm-6 col-xs-12 form-group">
        <input type="text" name="" class="form-control">
    </div>
    <div class="col-sm-6 col-xs-12 form-group">
        <input type="email" name="" class="form-control">
    </div>
    <div class="col-sm-12 form-group">
        <textarea name="" cols="" rows="10" class="form-control"></textarea>
    </div>
<form>

只需将其添加到您的表单部分，并添加 botstrap 所需的文件

1- Jquery

2- Bootsrap.min.css

Bootsrap Documentation

JS fiddle