DEMO

Question

如果两个输入字段在较大屏幕上的宽度较短时，如何将它们彼此靠近放置。问题是我希望输入字段在一行中具有较短的宽度。我最终实现了这一点，但随后在较短的屏幕上，它堆叠起来，即使它有足够的空间在一条线上。这是http://localhost:4200。

我想要的是：只要视口中有宽度，就将输入字段保持在一行中，否则，将它们叠加为全宽。

注意：我刚开始学习bootstrap并且不熟悉所有课程。

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 class

的使用

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

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

1 个答案:

DEMO