html - 一栏中的表格和另一栏中的文本段落

标签 html css forms grid-system

我怎样才能在容器的一侧有一个表单而在另一侧有一个文本段落?我想如果我把它全部放在一个容器中,一排两列,它会工作,但由于某种原因,段落文本显示在左侧的表格下方。

这是根据我现在拥有的代码所发生情况的屏幕截图。

Img

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

  1. 没有值为 full 的 CSS 规则。
  2. 不要在整个宽度上提供padding
  3. 您忘记添加一个容器类。
  4. 大量无效的 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>

预览

preview

输出:http://jsbin.com/mepiripeju/edit?html,css,output

关于html - 一栏中的表格和另一栏中的文本段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41412722/

相关文章:

html - 如何创建指向另一个页面的链接并为该页面上的 iframe 指定另一个 URL?

css - 制作几个水平子菜单

forms - 如何锁定在 Delphi 中的克隆表单?

jquery - 悬停时的 CSS 样式子类

PHP 表单数据到 MYSQL 数据库 NOT NULL 规则

javascript - 如何查看提交表单的 url 输出?

html - css 菜单最后一项不适合 View

jquery - 使用 css/jquery 隐藏较小的背景图像

android - 获取背景以完全覆盖android手机

html - 不显示要点