一栏中的表格,另一栏中的文字段落

乔·普雷维特

如何在容器的一侧有一个表格,在另一侧有一个文本段落?我想出了如果将它们全部放到一个具有两行一行的容器中会起作用,但是由于某种原因,段落文本会显示在左侧的表格下方。

这是基于我现在拥有的代码的屏幕快照。

图

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

我刚刚开始学习编码,因此如果这看起来像是一个愚蠢的问题,我深表歉意。我四处搜寻,却找不到答案。

先感谢您!

Praveen Kumar Purushothaman

提出任何问题之前,请正确学习HTML和CSS。

  1. 没有任何CSS规则具有value full
  2. 不要padding全力以赴width
  3. 您忘记添加container课程了。
  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>

预习

预习

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章