时间戳

首页 > 解决方案 > 为什么两列被压在一起？

html - 为什么两列被压在一起？

问题描述

列

为什么项目和博客相互挤压？无论字体大小

  <div class="container">
    <div class="row">

        <div class="col-xs-12 col-sm-2 col-md-6"><img src="../img/logo.png" alt=""></div>

        <div class="col-xs-12 col-sm-2 col-md-1  top-puller bolder">Home</div>
        <div class="col-xs-12 col-sm-2 col-md-1  top-puller bolder">About</div>
        <div class="col-xs-12 col-sm-2 col-md-1  top-puller bolder">Projects</div>
        <div class="col-xs-12 col-sm-2 col-md-1  top-puller bolder">Blog</div>
        <div class="col-xs-12 col-sm-2 col-md-1  top-puller bolder">Contact</div>

    </div>


.top-puller{
  margin-top: 20px;
 }
 .bolder{
font-weight: bold;
font-size: 25px;
}

标签： htmltwitter-bootstrapweb

解决方案

您可以使用标题结构：

CSS：

.top-puller {
    margin-top: 20px;
}
.bolder li {
    font-weight: bold;
    font-size: 25px;
}

HTML：

<div class="container">
    <div class="navbar-default top-puller">
        <div class="navbar-header">
              <a class="navbar-brand" href="#">Logo</a>
        </div>
        <ul class="nav navbar-nav navbar-right bolder">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Projects</a>
            </li>
            <li>
                <a href="#">Blog</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </div>
</div>

推荐阅读