Question

我对Bootstrap很新。我尝试创建一个boostrap滑块，左侧包含一个带有徽标的容器，一些文本，右侧包含一个登录表单。不幸的是，我的代码没有正常工作，一旦浏览器的分辨率降低，我的徽标和html表单就会被裁剪掉。

以下是我的代码：https://jsfiddle.net/bebetxx/z7w2bbso/3/

我的CSS

.blue-container
{
    color: white;
    background-color:#3C8DBC;
}

.blue-container h2,p
{
    color: #D2D6DE;
}


.black-container
{
    background-color: #2D2D2D;
}

.black-container h2,p
{
    color: #BBBBBB;
}

.image-container
{
    background: url("http://www.hogash-demos.com/ammon_html/images/sliders/full-slider/slide4.jpg") no-repeat center center scroll;
    background-size: cover;
    min-height: 350px;
    height: 350px;
    overflow: hidden;
}


/*SLIDER HEADER
============================================================*/
.slider {
    background: url("http://www.hogash-demos.com/ammon_html/images/sliders/full-slider/slide4.jpg")no-repeat center center scroll;
    background-size: cover;
    min-height: 450px;
    height: 300px;
    overflow: hidden;
}
.slider-wrap{
    padding: 10px 0px;
}
.slider-img{}
.slider-img img{
    width: 300px;
    height: 500px;
}
.slider{}
.slider-content{
    padding-top: 80px;
}


.slider h1 {
    margin: 0 0 20px 0;
    font-size: 50px;
    color: #fff;
    text-transform: uppercase;
    line-height: 60px;
    font-weight: 700;
}
.slider h2 {
    font-family: 'lora', serif;
    font-style: normal;
    color: #fff;
    text-transform: capitalize;
    font-size: 27px;
    text-shadow: 2px 5px 4px #000000;
}
.slider p {
    margin-bottom: 25px;
    color: #fff;
}

.top-link {
    margin-top: 60px;
}
.top-link a{
    padding: 20px 30px;
    border-radius: 3px;
    background: #fff;
    font-weight: 700;
    -webkit-transition: all .3s linear 0s;
    -o-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
}
.top-link a i{
    color: #00AEFF;
    font-size: 25px;
    margin-right: 10px;
}
.top-link a:hover{
    background: #00AEFF;
    color: #fff;
}

.top-link a:hover i{
    color: #fff;
}




.logo-slider {

    position:relative;
    width: 100% !important;   
    background-size:cover;
    padding-bottom: 35%;
    background-repeat: no-repeat;

    background-size: auto;
    max-width: 100%;

}




<!-- Main content -->
        <!-- slider section -->
<section class="slider">
    <div class="slider-wrap" >
        <div class="container">
            <div class="row">

                <div class="col-md-6 col-md-offset-1 "><div class="logo-slider" style="background-image:url(http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png)"></div><h2>Connect, discover & change the world</h2><ul class="top-link list-inline"><li><a href="http://127.0.0.1/#Registration"><i class="fa fa-android"></i> Register</a></li></ul></div><a name="loginbox"></a>
    <div id="loginbox" style="margin-top:10px;" class="col-md-4 col-md-offset-0 col-sm-8 col-sm-offset-2">
        <div class="panel panel-info" >
    <div class="panel-heading">
        <div class="panel-title">Sign In</div>
        <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>
    </div>

    <div style="padding-top:30px" class="panel-body" >

        <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

        <form id="loginform"  class="form-horizontal" action="http://127.0.0.1/login#Login" role="form" method="post">


            <div style="margin-bottom: 25px" class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
            </div>

            <div style="margin-bottom: 25px" class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
            </div>

            <input type="hidden" name="val" value="checkin">

            <div class="input-group">
                <div class="checkbox">
                    <label>
                        <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
                    </label>
                </div>
            </div>


            <div style="margin-top:10px" class="form-group">
                <!-- Button -->

                <div class="col-sm-12 controls">
                    <input type="submit" value="Login" class="btn btn-success">

                    <a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>

                </div>
            </div>


            <div class="form-group">
                <div class="col-md-12 control">
                    <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
                        Don't have an account?
                        <a href="http://127.0.0.1/#Registration" <!--onClick="$('#loginbox').hide(); $('#signupbox').show()" -->
                        <strong>Sign Up Now</strong>
                        </a>
                    </div>
                </div>
            </div>
        </form>



    </div>
</div>    </div>


            </div>
        </div> <!-- row end  -->
    </div> <!-- container end  -->
</section>


<section id="counter-area" class="blue-container">
    <div class="container">
        <div class="row">
            <div class="heading-inner text-center">
                <h2 class="sec-title">Register to <span style="color:white !important"><?php if (isset($g_sWebsiteName)) echo $g_sWebsiteName ?> </span> </h2>

                <p><strong>Register right away to this amazing community</strong></p>

                <?php
                    $this->view('registration_box');
                ?>

            </div>
        </div> <!-- heading row end -->
    </div>  <!-- container end -->
</section>

Answer 1

感谢@Skelly，第二个问题是主滑块的高度为：300px限制。

使用a而不是div徽标解决了第一个问题

Bootstrap响应容器获得高度裁剪

1 个答案: