Question

我的网页上有渲染问题，代码如下：

HTML：

<div class="container">
    <div class="row">
        <div class="col-md-6 panel panel-default">
            <h1 class="dontmiss">Ne manquez pas l'ouverture !</h1>
                <p class="description">
                Indiquez votre adresse email <br>
                et obtenez un <span class="voucher">bon de réduction de 5%</span> valable un mois sur l'ensemble de la boutique.
                </p>
                <p class="description">  
                Nous vous contacterons le jour de l'ouverture :)
                </p>
                <form class="margin-base-vertical">
                    <p class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
                    <input type="text" class="form-control input-lg" name="email" placeholder="Entrez ici votre email" />
                    </p>
                    <div class="col-xs-12">
                        <p class="text-center">
                        <input type="submit" value="Envoyer" name="subscribe" id="mc-embedded-subscribe" class="btn btn-warning submit"></button>
                        </p>
                    </div>
                </form>
        </div><!-- //main content -->
    </div><!-- //row -->
   </div><!--//container -->

CSS

.panel {
            background-color: rgba(255, 255, 255, 1);
            margin-top: 2%;
            margin-right: 5%;
            margin-left: 5%;
            max-width: 100%;
        }

        .dontmiss {
        text-align: center;
        font-size: 1.2em;
        font-weight: bold;
        font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
        margin-bottom:3%;
        margin-top: 4%;
        }

        .description{
        font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
        text-align: center;
        font-size: 90%;
        margin-top: 5%;
        margin-bottom: 6%;
        }

        .voucher{
        text-align: center;
        font-size: 1em;
        color:#FB6E06;
        font-weight: bold;
        }

        .input-group{
        width: 100%;
        }

        .submit{
        margin-bottom: 5%;
        margin-top: 3%;
        width:50%;
        font-weight: bold;
        font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
        }

.panel背景在.input-group下面停止，而不考虑我的按钮。我尝试将％的高度应用于我的.panel，同时为我的.row添加绝对高度值，但在这种情况下，当我增加屏幕尺寸时，我会失去响应性（内容的比例扩展）。

问题是如何让我的白色背景div包含我的提交按钮而不会失去响应能力。

最后信息：我正在使用Twitter bootstrap V3。

Answer 1

我想我理解你了。

检查这个小提琴http://jsfiddle.net/luckmattos/xfHAq/1/

在bootstrap3中，您需要使用类form-groups，同样应避免在同一元素中使用col-md-X和panel等类。 Panel基本上是一个容器，所以我用这个类创建另一个div并在你的提交按钮后关闭。

我没有使用@media查询来更改按钮的大小，使用100％宽度设置按钮并使用类col-sm-6 col-xs-12来设置其大小以及offset类使按钮居中。为了实现这一点，我也创建了row。

看起来很混乱，但请检查表单结构：

<form role="form">
    <div class="form-group">
        <p class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
            <input type="text" class="form-control input-lg" name="email" placeholder="Entrez ici votre email" />
        </p>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-sm-6 col-sm-offset-3 col-xs-12">
                <button type="submit" name="subscribe" id="mc-embedded-subscribe" class="btn btn-warning submit">Envoyer</button>
            </div>
        </div>
    </div>
</form>

您还可以使用btn-block类，使您的按钮在所有屏幕尺寸上都具有100％的宽度。

还有其他方法可以实现，请告诉我这是否有帮助。

谢谢。

如何在CSS中扩展div背景高度时保持响应？

1 个答案:

检查这个小提琴http://jsfiddle.net/luckmattos/xfHAq/1/