引导，两列不会并排(表单+消息)

Question

我正在尝试制作一个有两个列( lg-8和lg-3 (编辑)+1缓冲列)的联系人部分：

• 第一栏:联络表格
• 第二栏:来自我的一条简单的短信。

我环顾了几个地方，不明白我的代码有什么问题。我已经完成了引导资源所要求的一切，我得到了另一列下面的一列。

这是在“div class=”容器中的

  <div class="formattedContact" id="contact">
        <h3>Contact Me</h3>
        <div class="wrapper">
            <div class="content-main">                  
                <form id="contactForm">
                    <form class="form-item">        
                        <label for="inputName" ></label>
                        <input type="text" name="name" placeholder="Name" width="100%"></input>
                    </form>
                    <form class="form-item">        
                        <label for="inputEmail" ></label>
                        <input type="text" name="email" placeholder="Email" width="100%"></input>
                    </form>
                    <form class="form-item">        
                        <label for="inputPhone" ></label>
                        <input type="text" name="phone" placeholder="Phone" width="100%"></input>
                    </form>
                    <form class="form-item">        
                        <label for="inputMsg" >Message</label><br>
                        <textarea rows='5' placeholder='Message' > </textarea>
                    </form>                     
                    <button type="submit">Send</button>
                </form>
            </div>
            <div class="content-secondary">
                <p>Hullo, Shoot me a text</p>

            </div>
        </div>
    </div>

和CSS

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

Answer 1

我做了几次更改，目的是让它像您所描述的那样工作，并得到与输入链接的标签。让占位符与标签匹配是有点多余的，但是您可以用它来做您想做的事情。您可以将网格类名中的'xs‘改为'lg’，这样在一个小片段之外它们就更合适了。您可能会发现在两者之间需要一些东西，例如'sm'，(ex‘col 8’)，因为类对在破折号和较大值之间指定的大小生效。

另外，您知道这些引导网格系统类名末尾的宽度数通常应该是12，而不是给定屏幕宽度说明符的11，对吗？

​

#contactForm label {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="formattedContact" id="contact">
        <h3>Contact Me</h3>
        <div class="wrapper">
            <div class="content-main">                  
                <form id="contactForm" class="col-xs-8">
                  <label for="inputName" >Name</label>
                  <input type="text" name="inputName" placeholder="Name" width="100%">
                  <label for="inputEmail" >Email</label>
                  <input type="text" name="inputEmail" placeholder="Email" width="100%">
                  <label for="inputPhone" >Phone</label>
                  <input type="text" name="inputPhone" placeholder="Phone" width="100%">
                  <label for="inputMsg" >Message</label>
                  <textarea rows='5' placeholder='Message' name="inputMsg" > </textarea>
                  <button type="submit">Send</button>
                </form>
            </div>
            <div class="content-secondary col-xs-3">
                <p>Hullo, Shoot me a text</p>

            </div>
        </div>
    </div>
</div>

​

Answer 2

添加以下内容(尽管我建议向这些div和样式添加一个id )

.content-secondary,.content-main{
  display:inline-block;
  vertical-align:bottom
}

下面的片段

​

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
.content-secondary,
.content-main {
  display: inline-block;
  vertical-align: bottom
}

<div class="formattedContact" id="contact">
  <h3>Contact Me</h3>
  <div class="wrapper">
    <div class="content-main">
      <form id="contactForm">
        <form class="form-item">
          <label for="inputName"></label>
          <input type="text" name="name" placeholder="Name" width="100%"></input>
        </form>
        <form class="form-item">
          <label for="inputEmail"></label>
          <input type="text" name="email" placeholder="Email" width="100%"></input>
        </form>
        <form class="form-item">
          <label for="inputPhone"></label>
          <input type="text" name="phone" placeholder="Phone" width="100%"></input>
        </form>
        <form class="form-item">
          <label for="inputMsg">Message</label>
          <br>
          <textarea rows='5' placeholder='Message'></textarea>
        </form>
        <button type="submit">Send</button>
      </form>
    </div>
    <div class="content-secondary">
      <p>Hullo, Shoot me a text</p>

    </div>
  </div>
</div>

​

Answer 3

使用内置的行和列类：

<div class="container">
   <div class="row">
     <div class="col-sm-8">
       <div class="formattedContact" id="contact">
       <h3>Contact Me</h3>
       <div class="wrapper">
        <div class="content-main">                  
            <form id="contactForm">
                <form class="form-item">        
                    <label for="inputName" ></label>
                    <input type="text" name="name" placeholder="Name" width="100%"></input>
                </form>
                <form class="form-item">        
                    <label for="inputEmail" ></label>
                    <input type="text" name="email" placeholder="Email" width="100%"></input>
                </form>
                <form class="form-item">        
                    <label for="inputPhone" ></label>
                    <input type="text" name="phone" placeholder="Phone" width="100%"></input>
                </form>
                <form class="form-item">        
                    <label for="inputMsg" >Message</label><br>
                    <textarea rows='5' placeholder='Message' > </textarea>
                </form>                     
                <button type="submit">Send</button>
            </form>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="content-secondary">
            <p>Hullo, Shoot me a text</p>
        </div>
       </div>
    </div>
</div>