html - 在 Bootstrap 中自定义输入字段

Question

当两个输入字段在大屏幕上宽度较短时，如何将它们彼此靠近放置。问题是我希望输入字段位于宽度较短的一行中。我最终实现了这一点，但随后在较短的屏幕上它堆叠起来，即使它有足够的空间排成一行。这是 demo .

我想要的是:只要宽度适合视口(viewport)，就将输入字段保持在一行中，否则，将它们以全宽堆叠起来。

注意:我刚刚开始学习 bootstrap，并不精通所有类(class)。

HTML

<div class="site-wrapper">
    <div class="jumbotron">
        <h1>Header</h1>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group-lg">
                        <input id="user" class="form-control form-inline" placeholder="Your name" type="text">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-group-lg">
                        <select id="boardSize" class="form-control form-inline" title="Select Size">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background-color: #fff;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    margin: 0;
}
html, body {
    height: 100%;
    background-color: #333;
}
.site-wrapper {
    width: 100%;
    height: 100%;
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
    box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.jumbotron {
    background-color: #ccbb99 !important;
    /*background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));*/
    height: 100%;
    margin-bottom: 0;
}
.jumbotron h1 {
    font-family: chalkitup, "sans-serif";
    color: #69350F !important;
}
#user, #boardSize {
    max-width: 280px;
}

Answer 1

要防止堆叠，您应该使用 col-xs-*。如果您将 pull-right 和 pull-left 结合使用，那么您可以选择要在网格中放置输入的位置。注意 form-inline 类的使用

 <form class="form-inline">
    <div class="col-xs-6">
        <div class="form-group pull-right">
                <div class="input-group-lg ">
                    <input id="user" type="text" class="form-control form-inline" placeholder="Your name">
                </div>
        </div>
       </div>
    <div class="col-xs-6">
      <div class="form-group pull-left">
              <div class="input-group-lg ">
                  <select id="boardSize" class="form-control form-inline" title="Select Size">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                  </select>
              </div>
      </div>
    </div>
  </form>

DEMO