在引导程序中自定义输入字段

Question

当两个输入字段在较大的屏幕上具有较短的宽度时，如何将它们彼此靠近放置。 问题是我希望输入字段在一行中具有较短的宽度。 我最终实现了这一目标，但是在较短的屏幕上，即使它有足够的空间可以排成一行，它也会堆叠起来。 这是演示 。

我想要的是：只要视口中的宽度适合输入字段，否则将输入字段保持在一行中，否则将它们按全宽堆叠。

注意：我刚刚开始学习引导程序，并且不熟悉所有课程。

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

演示