一栏中的表格和另一栏中的文本段落
Form in one column and text paragraph in other column
我怎样才能在容器的一侧有一个表单而在另一侧有一个文本段落?我想如果我把它全部放在一个容器中,一排两列,它会工作,但由于某种原因,段落文本显示在左侧的表格下方。
这是根据我现在拥有的代码生成的屏幕截图。
<div class="container-section getintouch">
<h1 class="text-center">Say hello?</h1>
<div class="row">
<div class="col-xs-6">
<form>
<div class="form-group">
<input type="text" class="form-control no-border
placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control no-border"
placeholder="Email">
</div>
<textarea class="form-control no-border" rows="5" id="comment"></textarea>
</div>
</form>
</div>
<div class="col-xs-6">
<h3>Want to say hello? It's always nice meeting new people. Fill out
this form to the left and I'll reply to you as soon as I can :)
</h3>
</div>
</div>enter code here
.container-section{
width: full;
height: full;
margin: 0 auto;
padding: 100px;
color: white;
}
.getintouch{
background: #9dd1f1;
}
我刚开始学习编码,如果这个问题看起来很愚蠢,我深表歉意。我四处寻找,找不到答案。
提前致谢!
在提问之前正确学习HTML和CSS。
- 没有具有值
full
的 CSS 规则。
- 不要给
padding
满 width
。
- 您忘记添加
container
class.
- 大量无效 HTML、未关闭等等。
片段
.container-section {
-margin: 0 auto;
-color: white;
}
.getintouch {
background: #9dd1f1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-section getintouch">
<h1 class="text-center">Say hello?</h1>
<div class="container">
<div class="row">
<div class="col-xs-6">
<form>
<div class="form-group">
<input type="text" class="form-control no-border" id=formGroupExampleInput " placeholder="Name "">
</div>
<div class="form-group">
<input type="text" class="form-control no-border" id=formGroupExampleInput2 " placeholder="Email "">
</div>
<div class="form-group">
<textarea class="form-control no-border" rows="5" id="comment"></textarea>
</div>
</form>
</div>
<div class="col-xs-6">
<h3>Want to say hello? It's always nice meeting new people. Fill out this form to the left and I'll reply to you as soon as I can :)</h3>
</div>
</div>
</div>
预览
我怎样才能在容器的一侧有一个表单而在另一侧有一个文本段落?我想如果我把它全部放在一个容器中,一排两列,它会工作,但由于某种原因,段落文本显示在左侧的表格下方。
这是根据我现在拥有的代码生成的屏幕截图。
<div class="container-section getintouch">
<h1 class="text-center">Say hello?</h1>
<div class="row">
<div class="col-xs-6">
<form>
<div class="form-group">
<input type="text" class="form-control no-border
placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control no-border"
placeholder="Email">
</div>
<textarea class="form-control no-border" rows="5" id="comment"></textarea>
</div>
</form>
</div>
<div class="col-xs-6">
<h3>Want to say hello? It's always nice meeting new people. Fill out
this form to the left and I'll reply to you as soon as I can :)
</h3>
</div>
</div>enter code here
.container-section{
width: full;
height: full;
margin: 0 auto;
padding: 100px;
color: white;
}
.getintouch{
background: #9dd1f1;
}
我刚开始学习编码,如果这个问题看起来很愚蠢,我深表歉意。我四处寻找,找不到答案。
提前致谢!
在提问之前正确学习HTML和CSS。
- 没有具有值
full
的 CSS 规则。 - 不要给
padding
满width
。 - 您忘记添加
container
class. - 大量无效 HTML、未关闭等等。
片段
.container-section {
-margin: 0 auto;
-color: white;
}
.getintouch {
background: #9dd1f1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-section getintouch">
<h1 class="text-center">Say hello?</h1>
<div class="container">
<div class="row">
<div class="col-xs-6">
<form>
<div class="form-group">
<input type="text" class="form-control no-border" id=formGroupExampleInput " placeholder="Name "">
</div>
<div class="form-group">
<input type="text" class="form-control no-border" id=formGroupExampleInput2 " placeholder="Email "">
</div>
<div class="form-group">
<textarea class="form-control no-border" rows="5" id="comment"></textarea>
</div>
</form>
</div>
<div class="col-xs-6">
<h3>Want to say hello? It's always nice meeting new people. Fill out this form to the left and I'll reply to you as soon as I can :)</h3>
</div>
</div>
</div>
预览