Question

我在Bootstrap中构建了一个1-10-1列的头部结构。现在我想将这个！集中在10列中。但是正如你可以通过页面中间的虚线看到的那样！并不在中间的中心。为什么不？我怎么能在那里得到它？

标题的高度取决于其中文本的font-size。如何通过命令手动设置标题的高度？

HTML：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JFP</title>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="/static/main.css" >
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/static/app.js"></script>
</head>

<body>

<div id="body-wrapper">
<div class="menu">
        <div class="icon-close">
            <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
        </div>

        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
</div>

<div class="container-fluid">
    <div class="header">
        <div class="row">
            <div class="col-md-1 text-center">
                <div class="icon-menu">
                    <i class="fa fa-bars"></i>
                </div>
            </div>
            <div class="col-md-10 text-center">
                <li><a>!</a></li>
            </div>
            <div class="col-md-1 text-center">
            </div>
            </ul>
        </div>
    </div>
</div>


<div class="jumbo"></div>

<div class="footer">
    <div class="container">
        <p>&copy; Lorem ipsum.</p>
    </div>
</div>
</div>

</body>

</html>

CSS：

html {}

body{
    left: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

body:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0px;
    bottom: 0px;
    left: 50%;
    border-left: 1px dotted #333333;
}

.menu {
    left: -185px;
    height: 200%;
    position: fixed;
    width: 185px;
}

.menu ul {
    border-top: 1px solid rgb(51,51,51);
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    border-bottom: 1px solid rgb(51,51,51);
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
}

.menu a {
    color: rgb(51,51,51);
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
}

.icon-close {
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
}

.header {
}

.header i {
    font-size: 30px;
    margin-top: 15px;
}

.header a{
    color: rgb(250,250,250);
    font-size: 40px;
    text-align: center;
}

.header .col-md-10 {
    background-color: rgb(51,51,51);
    width: 85%;
    margin-left:auto;
    margin-right:auto;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.footer {
    background-color: rgb(51,51,51);
    color: rgb(51,51,51);
    padding: 30px 0;
    margin-top: 1000px;
}

.footer p {
    color: rgb(250,250,250);
    font-family: 'Raleway', sans-serif;
    text-transform: normal;
    font-size: 11px;
}

@media (max-width: 500px) {
    .main h1 {
        font-size: 50px;
        padding: 0 40px;
    }
    .supporting .col {
        width: 100%;
    }
}

JS：

$(document).ready(function() {
    $(".icon-menu").click(function() {
    $(".menu").animate({
    left: "0px"
    }, 600);
    $(".icon-menu").toggle(1600);

    $("body").animate({
    left: "185px"
    }, 600);
    });
});

$(document).ready(function() {
$('.icon-close').click(function() {
    $('.menu').animate({
    left: "-185px"
    }, 600);
    $(".icon-menu").toggle(600);

    $('body').animate({
    left: "0px"
    }, 600);
    });
});

Codepen

Answer 1

试试这个：

<div class="row col-md-12">
...
     <div class="col-md-10 text-center">
          <li><a>!</a></li>
     </div>
...
</div>

如果要更改标题的高度，请尝试设置div的高度，例如：

<div class="col-md-10 text-center" style="height:100px;">
     <li><a>!</a></li>
</div>

当然，对于好的风格，在css中创建一个具有高度值的特定样式并添加到div的类中。

Answer 2

但正如您可以通过页面中间的虚线看到的那样！不是在确切的中间居中。为什么不？我怎么能在那里得到它？

在不知名的地方有一个列表标签<li>无效。尝试使用<span>代替（或完全不使用），!将居中。

<div class="col-md-10 text-center">
  <a>!</a>
</div>

如何通过命令手动设置标题的高度？

您可以指定height属性。我还设置了background-color，因此您可以看到header实际增长。

.header {
  height: 200px;
  background-color: blue;
}

Answer 3

actuallay ！已经在中心你的虚线给出了身体后不对齐中心你需要使用翻译而不是左边。要使标题达到高度，您需要在navbar div中为自举类提供标题。

这是演示......

＆＃13;

$(document).ready(function() {
    $(".icon-menu").click(function() {
    $(".menu").animate({
    left: "0px"
    }, 600);
    $(".icon-menu").toggle(1600);
                          
    $("body").animate({
    left: "185px"
    }, 600);
    });
});

$(document).ready(function() {
$('.icon-close').click(function() {
    $('.menu').animate({
    left: "-185px"
    }, 600);
    $(".icon-menu").toggle(600);
                       
    $('body').animate({
    left: "0px"
    }, 600);
    });
});

＆＃13;

html {}

body{
    left: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

body:after {
     border-left: 1px dotted #333333;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    margin: 0 auto 0 50%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
     z-index: -1;
    -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }

.menu {
    left: -185px;
    height: 200%;
    position: fixed;
    width: 185px;
}

.menu ul {
    border-top: 1px solid rgb(51,51,51);
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    border-bottom: 1px solid rgb(51,51,51);
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
}

.menu a {
    color: rgb(51,51,51);
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
}

.icon-close {
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
}

.header {
}

.header i {
    font-size: 30px;
    margin-top: 15px;
}

.header a{
    color: rgb(250,250,250);
    font-size: 40px;
    text-align: center;
}

.header .col-md-10 {
    background-color: rgb(51,51,51);
    width: 85%;
    margin-left:auto;
    margin-right:auto;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.footer {
    background-color: rgb(51,51,51);
    color: rgb(51,51,51);
    padding: 30px 0;
    margin-top: 1000px;
}

.footer p {
    color: rgb(250,250,250);
    font-family: 'Raleway', sans-serif;
    text-transform: normal;
    font-size: 11px;
}

@media (max-width: 500px) {
    .main h1 {
        font-size: 50px;
        padding: 0 40px;
    }
    .supporting .col {
        width: 100%;
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JFP</title>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="/static/main.css" >
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/static/app.js"></script>
</head>

<body>

<div id="body-wrapper">
  

<div class="navbar"> 

<div class="menu">
        <div class="icon-close">
            <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
        </div>
                
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
  </div>

<div class="container-fluid">
    <div class="header ">
        <div class="row">
            <div class="col-md-1 text-center">
                <div class="icon-menu">
                    <i class="fa fa-bars"></i>
                </div>
            </div>
            <div class="col-md-10 text-center">
                <li><a>!</a></li>
            </div>
            <div class="col-md-1 text-center">
            </div>
            </ul>
        </div>
    </div>
</div></div>


<div class="jumbo"></div>

<div class="footer">
    <div class="container">
        <p>&copy; Lorem ipsum.</p>
    </div>
</div>
</div>

</body>

</html>

＆＃13;

Bootstrap列中没有居中的文本

3 个答案: