Question

我知道我做错了，但我不知道如何妥善解决。

我有一个在col-lg上有display：relative的注册表单。但我不知道如何根据屏幕尺寸更改css。所以我只是复制了注册表单并给它一个不同的类名并相应地更改了css。

我遇到的问题是，如果有人输入信息然后决定调整屏幕，那么所有信息都会消失（因为它在col-lg上！）

如何解决此问题而无需复制表单？我想不使用jquery或javascript，但如果我必须，我会。

.form-signup {
  position: absolute;
  bottom: 70px;
  right: 0;
  margin-right: 35px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

<!-- First form -->
<div class="col-xs-4 col-sm-4 col-md-4 pull-right form-signup hidden-md hidden-sm hidden-xs">
            <form role="form">
                <h2>
                    <div class="text-center lead p-color">Tagline</div>
                </h2>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6">
                        <div class="form-group">
                            <input type="text" name="first_name" id="FN" class="form-control input-md" placeholder="First Name" tabindex=1 autofocus>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-6">
                        <div class="form-group">
                            <input type="text" name="last_name" id="LN" class="form-control input-md" placeholder="Last Name" tabindex=2>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <input type="email" name="email" id="EM" class="form-control input-md" placeholder="Email Address" tabindex=3>
                </div>
                <div class="form-group">
                    <div class="form-group">
                        <input type="password" name="password" id="PW" class="form-control input-md" placeholder="Password" tabindex=4>
                    </div>
                </div>
                <div class="checkbox">
                    <label>
                        <input class="checkbox-focus" type="checkbox" tabindex=5>I agree to 
                            <a class="ri-anchor" href="#" tabindex=6>terms</a>
                    </label>
                </div>
                <div class="row">
                    <div class="form-group register-div">
                        <input type="submit" value="Sign Up" class="btn btn-primary btn-block btn-lg" tabindex=7>
                    </div>

                </div>
            </form>
        </div>

<!-- Second Form -->
<div class="row row-offset center-block">
        <div class="col-md-12 text-center hidden-lg"><img src="images/landing-md-xs.png" class="img-responsive center-block" alt=" animation" style="height: auto; width: 500px;"/></div>
        <div class="col-xs-offset-2 col-xs-8 col-md-offset-3 col-md-6 hidden-lg">
            <form role="form">
                <h2>
                    <div class="text-center lead p-color">TAGLINE</div>
                </h2>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6">
                        <div class="form-group">
                            <input type="text" name="first_name" id="first_name" class="form-control input-md" placeholder="First Name" tabindex=1 autofocus>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-6">
                        <div class="form-group">
                            <input type="text" name="last_name" id="last_name" class="form-control input-md" placeholder="Last Name" tabindex=2>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <input type="email" name="email" id="email" class="form-control input-md" placeholder="Email Address" tabindex=3>
                </div>
                <div class="form-group">
                    <div class="form-group">
                        <input type="password" name="password" id="password" class="form-control input-md" placeholder="Password" tabindex=4>
                    </div>
                </div>
                <div class="checkbox">
                    <label>
                        <input class="checkbox-focus" type="checkbox" tabindex=5>I agree to 
                            <a class="ri-anchor" href="#" tabindex=6> terms</a>
                 </label>
                </div>
                <div class="row">
                    <div class="form-group register-div">
                        <input type="submit" value="Sign Up" class="btn btn-primary btn-block btn-lg" tabindex=7>
                    </div>

                </div>
            </form>
        </div>
    </div>

Answer 1

col-lg-x是一个引导类，它将div网格大小赋值为x。这是大屏幕。但是移除不应该像上面提到的那样彻底改变设计。 这是因为你有错误链接的bootstrap css文件。同样在上面的代码中，您已经包含了 jquery 而不是 bootstrap 。

编辑：我遇到的问题是，如果有人输入信息然后决定调整屏幕，那么所有信息都会消失（因为它在col-lg上！）

为此，根据您对x值的需要，在div上添加其他类col-md-x，col-xs-x`。

Bootstrap - 更改表单组的css @media大小

1 个答案: