Question

我希望我的登录页面在xs / sm视口上看起来像这样：

label1     
[input1]      

label2
[input2]

这适用于md / lg视口：

label1       label2
[input1]     [input2]

但是我的解决方案需要为每个

分别设置一个网格

<div class="container-fluid">
      <!-- small screens -->
      <div class="visible-xs visible-sm">
            <div class="row">
                  <div class="col-xs-12">
                        <label for="username">username</label>
                  </div>

                  <div class="col-xs-12">
                        <input type="text" name="username" />
                  </div>
            </div>

            <div class="row">
                  <div class="col-xs-12">
                        <label for="password">password</label>
                  </div>

                  <div class="col-xs-12">
                        <input type="text" name="password" />
                  </div>
            </div>
      </div>


      <!-- large screens -->
      <div class="visible-md visible-lg">
            <div class="row">
                  <div class="col-md-2">
                        <label for="username">username</label>
                  </div>

                  <div class="col-md-1"></div>

                  <div class="col-md-2">
                        <label for="password">password</label>
                  </div>

                  <div class="col-md-7"></div>
            </div>

            <div class="row">
                  <div class="col-md-2">
                        <input type="text" name="username" />
                  </div>

                  <div class="col-md-1"></div>

                  <div class="col-md-2">
                        <input type="text" name="password" />
                  </div>

                  <div class="col-md-7"></div>
            </div>
      </div>
</div>

一个网格可以做到这一点吗？另外我在这种布局中如何以及为什么要使用form-group？

Answer 1

我认为您应该使用此代码来解决问题

 <div class="container-fluid">
      <!-- For all screens -->
      <div class="visible-lg visible-md visible-xs visible-sm">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-6 col-md-6">
              <div class="col-sm-12 col-xs-12">
                <label for="username">username</label>
              </div>
              <div class="col-sm-12 col-xs-12">
                <input type="text" name="username" />
              </div>
            </div>
           <div class="col-lg-6 col-md-6">
              <div class="col-sm-12 col-xs-12">
                <label for="password">Password</label>
              </div>
              <div class="col-sm-12 col-xs-12">
                <input type="text" name="Password" />
              </div>
            </div>
        </div>
      </div>
    </div>

最佳间距需要.form-group。

这个Bootstrap响应式布局是否需要两个独立的网格？

1 个答案: