个人中心
gpt4 book ai didi

jquery - Bootstrap 3 中心样式尝试失败

转载 作者：行者123 更新时间：2023-11-28 09:10:34 25 4
gpt4 key购买 nike

这是完整的 jsFiddle for my code .

我正在尝试将页脚居中。请注意，主要页脚链接从各自的“列领导”(“ONE”、“TWO”、“THREE”和“FOUR”)开始缩进；即使在所有内容都居中之后，我仍然需要保留缩进。

放置 <center>页脚 div 周围的标签不能满足我的需要...我需要 4 个列标题，加上 <hr/> , 加上居中的版权/隐私/服务链接；此外，我需要将列链接(在领导下)缩进 4 - 5 个空格。

任何人都可以帮助我提供必要的 CSS 调整来实现我的目标吗？我正在失去理智试图解决这个问题!

在我的脑海深处，我担心我的 JS 可能会以某种方式抛出错误，并可能导致浏览器无法正确呈现:

$('#fieldModePopover').popover({ 
    content: function() {
        return "Yahtzee!";
    }
});

最佳答案

我认为您需要在页脚中设置 4 列并且整个页脚应该居中。如果是这种情况请告诉我，然后我会尝试解释一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyApp</title>

    <!-- External CSS to include. -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
* {
    margin: 0;
}

/*
 *  Colors:
 *      Dark Blue:      rgb(12,66,144)
 *      Light Blue:     rgb(176,205,249)
 */

/*html, body {
    height: 100%;
}*/

html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.rowc{
    text-align: center;
    background-color: red;
}

.colc{

    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}
.navbar-inverse {
    background: rgb(12,66,144);
    border: solid 1px rgb(12,66,144);
}

.navbar-inverse .navbar-brand {
    color: rgb(176,205,249);
}

.navbar-inverse .navbar-nav > li > a {
    color: rgb(176,205,249);
}

.nav .signin {
    position:absolute;
    top:0;
    right:0;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

.footer, .push {
    height: 4em;
    min-height: 200px;
}

.footer {
    color: rgb(176,205,249);
    background: rgb(12,66,144);
    border-top: solid 5px rgb(176,205,249);

    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
}

.spacer {
    margin-top: -10px;
}

hr {
    color: rgb(176,205,249);
}

.right-pinned-col {
    position:absolute;
    right: 235px;
}

.field-mode {
    color: rgb(255,102,0);
}

.fieldModePopover{
    width:200px;
    height:250px;    
}

.field-mode-header {
    border: solid 3px rgb(255,102,0);
}

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="container-fluid">
            <!-- Header and main nav. -->
            <!-- If in Field Mode, append a "field-mode-header" class to this nav element below. -->
            <nav class="navbar navbar-inverse">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">My<b>App</b></a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li>
                            <a class="dropdown" data-toggle="dropdown" href="#">Fizz&nbsp;<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Who we are</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">What we do (best)</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Demo</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">FAQ</a></li>
                            </ul>
                        </li>
                        <li>
                            <a class="dropdown" data-toggle="dropdown" href="#">Buzz&nbsp;<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Ask a question</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Apply for work</a></li>
                            </ul>
                        </li>
                        <li>
                            <a class="dropdown" data-toggle="dropdown" href="#">Foo&nbsp;<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Bar</a></li>
                            </ul>
                        </li>

                        <li>
                            <a id="fieldModePopover" href="#" data-html="true"
                                data-content="In <b>Field Mode</b>, you may continue to use this app, however you are not connected to our backend. All data will be saved locally to your computer. To sync this data remotely you will need to sign back in and send it once you have a network connection."
                                rel="popover" data-placement="right"
                                data-original-title="<b>Field Mode is Activated</b>" data-trigger="hover">
                                <span class="field-mode glyphicon glyphicon-road"></span>
                            </a>
                        </li>

                        <li class="signin">
                            <a id="popoverData" href="#" data-html="true" data-content="<input class='form-control' placeholder='username'>" rel="popover" data-placement="bottom" data-original-title="Sign in to your account" data-trigger="click"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Sign In | Register</a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- Page content. -->
            <div class="jumbotron">
                <div class="container">
                    <h1>My<b>App</b></h1>
                    <p>
                        The greatest app ever written by Smeeb.
                    </p>

                    <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
                </div>
            </div>

        </div>
    </div>

    <!-- Footer. -->


    <footer class="footer img-rounded">
        <div class="container">
            <div class="row rowc">
                <div class="col-md-3 colc">
                    <b>ONE</b>
                    <div class="">&nbsp;&nbsp;&nbsp;1-Minute Video</div>
                    <div class="">&nbsp;&nbsp;&nbsp;5-Minute Video</div>

                        <div class="">&nbsp;&nbsp;&nbsp;Demo</div>

                        <div class="">&nbsp;&nbsp;&nbsp;FAQ</div>                   
                </div>
                <div class="col-md-3 colc">
                    <b>TWO</b>

                        <div class="">&nbsp;&nbsp;&nbsp;Ask a Question</div>

                        <div class="">&nbsp;&nbsp;&nbsp;Apply</div>

                </div>
                <div class="col-md-3 colc">
                    <b>THREE</b>

                        <div class="">&nbsp;&nbsp;&nbsp;Bar</div>

                </div>
                <div class="col-md-3 colc">
                    <b>FOUR</b>

                        <div class="">&nbsp;&nbsp;&nbsp;Blog</div>


                        <div class="">&nbsp;&nbsp;&nbsp;Social: <img src="fb.png" /></div>

                        <div class="">&nbsp;&nbsp;&nbsp;Wiki</div>

                        <div class="">&nbsp;&nbsp;&nbsp;Sitemap</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-7 col-md-offset-3"><hr/></div>
            </div>
            <div class="row">
                <div class="col-md-5 col-md-offset-3">
                    <span class="glyphicon glyphicon-copyright-mark"></span>
                     Smeeb 3050
                </div>
                <div class="col-md-2 right-pinned-col">Privacy Policy | Terms of Service</div>
            </div>
        </div>
    </footer>



    <!-- Scripts to include. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="auditcloud.js"></script>
</body>
</html>

关于jquery - Bootstrap 3 中心样式尝试失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26532727/

25 4 0
文章推荐： javascript - 如何从Extjs中的 Controller 调用 View 的监听器
文章推荐： html - 发现很难对齐登录界面
文章推荐： ipad - 装有 iOS 8 的 iPad 中的方向问题
文章推荐： css - 如何在 标签中使用 z-index？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com