Question

我正在尝试创建一个包含两列的联系部分，一个lg-8和lg-3（EDIT）+ 1缓冲列：

第一栏：联系表格
第二栏：来自我的简单短信。

我环顾了几个地方，无法理解我的代码有什么问题。我已经完成了[bootstrap] [1]资源所说的所有内容，并且我在另一列之下获得了一列。

这是'div class =“container”'

  <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

添加以下内容（虽然我建议为这些div和样式添加id）

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

下面的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用内置的行和列类：

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

Answer 3

将float：left添加到content-main

.content-main {
  .make-lg-column(8);
  float:left;
}

https://jsfiddle.net/9Lf16p1c/

Answer 4

我进行了一些更改，以便在描述时使其工作并将标签链接到输入。让占位符与标签匹配有点多余，但你可以用它做你想做的事情。您可以在网格类名称中将'xs'更改回'lg'，因此它们在小片段之外更合适。你可能会发现你想要介于两者之间的东西，例如'sm'，（ex'col-sm-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>

Bootstrap，两列不会并排（Form + Message）

4 个答案: