Question

以下是我网站中页眉/页脚的代码。 IT仍然是固定的。这里的问题是底部边缘。

我想把我的标题推到底线。

添加bottom-margin的按钮无法解决问题？任何人都可以提供一些线索吗？

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="email-input navbar-left">
            <div id="input-group-email" class="input-group">
                <input id= "email-input-box" type="email" class="form-control" name = "email" placeholder="xyz@example.com" autocomplete="on" autofocus="autofocus" required="required">
                <span class="input-group-btn">
                    <button id="submit-email-btn" class="btn btn-default" type="button" disabled>Get Notified!</button>
                </span>
            </div>

        <div id="notified-alert" style="display:none; font-size: 18px;font-family: 'calibri'; color: grey; margin-top: 8px; margin-left: -50%;">We stand notified ... :)</div>
        </div>
        <p class="navbar-text navbar-right">
<span class="arrorPos">Login <i class="fa fa-play"></i></span>
            <i class="fa fa-facebook-square fa-2x"></i>
            <i class="fa fa-twitter-square fa-2x"></i>
        </p>
    </div>

Answer 1

我不确定我是否理解你的问题。尝试style="margin-bottom:5px;"设置通知框的简便方法是给出恒定的宽度。<input id= "email-input-box" style="width:200px;">

Answer 2

调整导航栏文字课程，这是一个更新的小提琴http://jsfiddle.net/AA3FJ/2/

.navbar-text {
    margin-top:5px;
    margin-bottom:5px;
}

我认为这至少是你想要做的，有点难以理解你的问题。

编辑：好的，您要做的是在导航菜单中的浮动元素周围添加带.container类的div

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        <div class="email-input navbar-left">
            <div id="input-group-email" class="input-group">
                <input id= "email-input-box" type="email" class="form-control" name = "email" placeholder="xyz@example.com" autocomplete="on" autofocus="autofocus" required="required">
                <span class="input-group-btn">
                    <button id="submit-email-btn" class="btn btn-default" type="button" disabled>Get Notified!</button>
                </span>
            </div>

        <div id="notified-alert" style="display:none; font-size: 18px;font-family: 'calibri'; color: grey; margin-top: 8px; margin-left: -50%;">We stand notified ... :)</div>
        </div>
        <p class="navbar-text navbar-right">
<span class="arrorPos">Login <i class="fa fa-play"></i></span>
            <i class="fa fa-facebook-square fa-2x"></i>
            <i class="fa fa-twitter-square fa-2x"></i>
        </p>
            </div>
    </div>

减少bootstrap标头中的下边距

2 个答案: