Question

我正在创建一个登录名，并希望将容器添加到另一个容器中。一个容器是浅蓝色，另一个是深蓝色。 This is a screen shot of what it currently looks like

我希望能够将深蓝色容器放在另一个容器的整个宽度上，并且高度要比现在大。这是下面html的结构：

 <div class="container">
  <a href="../index.html">
         <img id="logologin" src="../img/logo1.png" alt="logo"/>
    </a>
    <div class="card card-container">
    <?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
    <?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert">  <?php echo $fmsg; ?> </div><?php } ?>

        <p id="profile-name" class="profile-name-card"></p>
        <form class="form-signin" method="POST">
            <span id="reauth-email" class="reauth-email"></span>
            <label> <input type="text" name="username" id="username" class="form-control" placeholder="Username"></label>
            <label><input type="password" name="password" id="password" class="form-control" placeholder="Password" required></label>
            <div id="remember" class="checkbox">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me
                </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" name="submit">Sign in</button>
            <div class="link"> <a href="register4.php"> Forgot Password?
        </a></div> 
        </form><!-- /form -->

        <div class="forgot-password">
            Don't have an account? <a href="register4.php"> Create an account
        </a>
    </div><!-- /forgot-password -->

</div><!-- /card-container -->

  </div><!-- /container -->

这是我正在尝试构建的深蓝色容器的css

.forgot-password {
color: #848585;
font-size:14px;
background-color: #5967b9;
}

感谢您提前提供任何帮助 - 包含所有代码的{j}小提琴https://jsfiddle.net/68t0t1jt/

Answer 1

你可以绕过卡容器填充，即带有填充的类，这使得内部元素不可能具有全宽度：

logging.Formatter

然后你可以在表单元素中添加填充或边距，使其内容回到中心：

.card-container{
  padding: 0 !important;
}

然后使用此<form class="form-signin" method="POST" style="padding: 40px 40px;">类：

forgot-password

非常基本的小提琴：https://jsfiddle.net/6L84ycr4/
希望它能帮到你

Answer 2

你可以尝试：

<div class="container" style="height: inherit;" >

或身高：100％

Answer 3

这是更新的小提琴：jsfiddle.net/68t0t1jt/1

如评论中所述，您只需从.card-container.card中删除填充并重新应用到.form-signin

如何创建另一个容器的整个宽度的容器

3 个答案: