文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >基于Bootstrap 3的小型响应测试项目的HTML和CSS代码

问基于Bootstrap 3的小型响应测试项目的HTML和CSS代码
EN

Code Review用户
提问于 2014-06-14 16:26:47
回答 2查看 1.6K关注 0票数 2

不要注意789 pay以上的菜单太糟糕了。“理论上”的任务是只支持平板电脑和智能手机，我不想让菜单在其他设备上看起来很好。只需回顾它低于789 of的大众。

下面是一个要演示的码页。

该页面目前100%匹配PSD设计和运行良好的所有需要的设备，虽然我担心我实现的解决方案，以使它匹配。

  1. 将min-height设置为navbar为自定义大小，从而使用padding控制折叠按钮和Logo上垂直中心的外观。我必须将482 so以下的width: 70%设置为.navbar-brand，这样图像大小就不会溢出。也许有一种更像“自动”的方法来控制肚脐大小和菜单的中心位置？我用了一些更少的方法来计算垫子，但它也涉及到使用paddings。
  2. 为名为“所有类型的鸟类”的正确部分创建这个second-container-helper类，不是让padding-left用于768 of之上的查询，而是让它用于768 of以下的查询。实现外观的更好方法是什么？我的意思是，“各种鸟”的内容没有超过768 as的padding-left，但它低于768 as，因为它与PSD模型匹配。

代码语言：javascript
复制
<html lang="en">
<head>

  <meta charset="UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Document</title>

  <!-- Styles Embedded -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
  <!-- Embedded Font Awesome for the right-caret icon -->
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>


  <nav class="navbar navbar-default" role="navigation">



      <div class="navbar-header">
         <div class="container-fluid">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsed">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>



            <a class="navbar-brand" href="#">
              <img src="http://php.atservers.net/test/images/logo.png" alt="">
            </a>

        </div> <!-- //.container-fluid (Brand and button wrapped together so as they don't affect navbar LIST items) -->

      </div><!-- //.navbar-header -->

      <div class="collapse navbar-collapse" id="navbar-collapsed">

        <ul class="nav navbar-nav">

          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Bird Information</a></li>
          <li><a href="#">Contact</a></li>

        </ul><!-- //.navbar-nav -->

      </div> <!-- //.navbar-collapse -->



  </nav>

  <div class="row">
    <div class="col-xs-12 col-sm-12">
        <img src="http://php.atservers.net/test/images/bird-main.png" class="custom-img" alt="Hi, I'm a Bird">
    </div> <!-- //.column -->
  </div><!-- //.row -->

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-12">
        <p class="section-header">Find Birds In Your Area</p>
        <select name="" id="">
          <option value="" selected>Select Your Region</option>
          <option value="">CA</option>
          <option value="">FL</option>
          <option value="">WA</option>
        </select>
      </div>
    </div> <!-- //.row -->
  </div> <!-- //.container-fluid -->

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-12">
        <p class="section-subheader">We'r Really Into Birds</p>
        <p class="section-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p></p>
      </div><!-- //.column -->
    </div> <!-- //.row-->
  </div> <!-- //.container-fluid -->

  <div class="row">
    <div class="col-xs-12 col-sm-6 section-column">
      <img src="http://php.atservers.net/test/images/tree-birds.png" alt="" class="custom-img">
        <div class="container-fluid">
          <div class="section">
            <p class="section-subheader">Even Birds in Trees</p>
            <p class="section-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam excepturi voluptates harum fugit enim non, id porro repellendus soluta cupiditate consequuntur dignissimos dolorem sint corporis, illo aliquam blanditiis hic nam.</p>
                <p class="section-content">
                  <a href="#" class="section-link"><i class="fa fa-caret-right"></i>Learn more about trees (and birds)</a>
                </p>
          </div> <!-- //.section -->
      </div><!-- //.container-fluid -->
    </div> <!-- //.column-->


    <div class="col-xs-12 col-sm-6">
        <img src="http://php.atservers.net/test/images/all-birds.png" alt="" class="custom-img">
          <div class="second-container-helper"> <!-- Need that not to have left paddings @iPad, but have them @iPhone -->
            <div class="section">
              <p class="section-subheader">All Kinds of Birds</p>
              <p class="section-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est tenetur, reprehenderit at odio sit cumque neque placeat impedit praesentium soluta dolorum architecto qui molestias facilis voluptatibus, ut unde. Tenetur, provident.</p>
                  <p class="section-content">
                    <a href="#" class="section-link"><i class="fa fa-caret-right"></i>Learn more about trees (and birds)</a>
                  </p>
            </div><!-- //.section -->
          </div> <!-- //.second-container-helper -->
    </div> <!-- //.column -->

  </div><!-- //.row -->

    <footer>
      <div class="container-fluid">
        <div class="row">

          <div class="col-xs-12 col-sm-12">
            <div class="footer-credits">
              <p class="text-muted">® Registered trademark of An Amazing Company Name, an affiliate of independent Canadian birds</p>
              <p class="text-muted">© Copyright 2014 An Amazing Company Name</p>
            </div> <!-- //.footer-credits -->
          </div><!-- //.column -->

          <div class="col-xs-12 col-sm-12">
            <ul class="footer-nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">Terms of Use</a></li>
            </ul>
          </div><!-- //.column -->

        </div> <!-- //.row -->
      </div><!-- //.container-fluid -->
    </footer>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://php.atservers.net/test/js/bootstrap.min.js"></script>
</body>

CSS

代码语言：javascript
复制
/* Global Styles */

img{
  height: auto;
  width: 100%;
  display: block;
}

a{
  color: #ff6600;
}

.container-fluid{
  padding-left: 40px;
  padding-right: 40px;
}

/* //Global Styles */






/* Navbar Styles */

.navbar{
  min-height: 158px;
  background-color: #ffffff;
  margin-bottom: 0;
  border: none;
}

.navbar-default{
  border: none;
}

.navbar-brand{
  margin-top: 36px;
}

.navbar-default .navbar-toggle{
  margin-top: 58px;
}

.navbar-default .navbar-collapse{
  border-color: transparent;
}

.navbar-collapse.in{
  margin-top: 65px;
}

.collapsing{
  margin-top: 65px;
}

/* Navbar Colors and Fonts */

.navbar-nav{
  background-color: #ff6600;
  padding-left: 40px;
  padding-right: 40px;
  margin: 0 -15px;
}

.navbar-default .navbar-nav > li > a{
  color: #ffffff;
  border-top: 1px solid #fff;
}

.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{
  background-color: transparent;
  color: #fff;
  border-top: none;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
  color: #fff;
}

/* //Navbar Colors and Fonts */




.nav li:before{
    font-family: 'Glyphicons Halflings';
    content: "\e080";
    float: right;
    color: #fff;$
    padding-top: 10px;
}



/* //Navbar Styles */









/* Select Styles */


select{
  width: 100%;
  background-color: #ffffff;
  height: 60px;
  font-size: 24px;
  color: #c7c7cc;
  border: 2px solid #c7c7cc;
  border-radius: 4px;
  -webkit-appearance: none;
  background: url('../images/dropdown-arrow.png') no-repeat right;
  background-position: 98%;
}




/* //Select Styles */





/* Section Styles */

.section{
  margin-bottom: 30px;
}

.section-header{
  font-weight: bold;
  font-size: 30px;
  color: #ff6600;
  padding-top: 30px;
  padding-bottom: 30px;
}

.section-subheader{
  font-size: 28px;
  color: #ff6600;
  padding-top: 36px;
  padding-bottom: 16px;
}

.section-content{
  color: #999999;
  font-size: 18px;
}

.section-link{
  font-size: 14px;
}

.fa-caret-right{
  padding-right: 10px;
}
.container-helper{
  padding-right: 40px;
}


/* //Section Styles */








/* Media Queries */


/* Fix for iPhone select font size */

@media screen and (max-width: 482px){
  select{
    font-size: 18px;
  }
}

/* // Fix for iPhone */


/* Section Media Queries Helpers */

/* container in 2nd section has left padding below 768px to match PSD design */
@media screen and (max-width: 768px){
  .second-container-helper{
    padding-left: 40px;
  }
}

/* container in the left section doesnt have right padding after 768px, but has it below 768px */
@media screen and (min-width: 768px){
  .section-column .container-fluid{
    padding-right: 0;
  }
}
/* //Section Media Queries Helpers */



/* Logo img resizes below 482px */

@media screen and (max-width: 482px){
  .navbar-brand{
    width: 70%;
    margin-top: 46px;
    height: auto;
  }
}

/* //Logo img resizes below 482px */





/* //Media Queries */















/* Footer Styles*/



footer{
  margin-top: 80px;
}

.footer-credits{
  border-top: 1px solid #c7c7cc;
}
.footer-nav{
  list-style: none;
  padding-left: 0;
}

.footer-nav li{
  float: left;
  padding: 5px;
}

.footer-nav li a{
  border-right: 1px solid #c7c7cc;
  padding-right: 10px;
}

.footer-nav li:last-child a{
  border-right: none;
}



/* Footer Styles */
html
css
html5
twitter-bootstrap
EN

回答 2

Code Review用户

回答已采纳

发布于 2014-06-15 17:25:48

不恰当地使用标记

当您使用标题标记(h1-h6)标记标题时，您正在使用段落来标记标题(您还存在拼写错误)。

代码语言：javascript
复制
<p class="section-subheader">We'r Really Into Birds</p>

应：

代码语言：javascript
复制
<h1 class="section-subheader">We're Really Into Birds</h1>

您有一些无效的标记，这可能导致意外的事情发生。您不允许在其他段落中放置段落：

代码语言：javascript
复制
<p class="section-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p></p>

应：

代码语言：javascript
复制
<div class="section-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p></div>

但是，如果您的所有段落都有相同的样式，则应该对段落本身进行样式化，而不是将类应用于每个段落：

代码语言：javascript
复制
p {
    /* styles from the section-content class */
}

创建用于样式设计的空标记是肮脏的，而且可能是Twitter Bootstrap鼓励的最糟糕的事情之一(分类是另一种)。有更干净的方法来创建这种类型的元素：

代码语言：javascript
复制
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsed">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

应该是这样的：

代码语言：javascript
复制
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsed">
  <span class="sr-only">Toggle navigation</span>
</button>

和

代码语言：javascript
复制
.navbar-toggle:before {
    /* styles to make it look like the ubiquitous hamburger icon */
}

第二个容器-助手类

这里有一些问题(无论是实现还是设计，我都无法判断，因为您还没有向我们展示您正在进行的模拟)。不管怎样，你不需要额外的元素。

你有一页是这样的：

在我看来，如果它看起来像这样的话，它会更有吸引力：

或者这个：

但是，所有这些操作都可以通过简单的标记来完成，只需修改边距：

代码语言：javascript
复制
<ul>
  <li><p>A</p></li><!--
  --><li><p>B</p></li>
</ul>
  • 1个http://codepen.io/cimmanon/pen/KxDbL
  • 2 http://codepen.io/cimmanon/pen/jtEGf (需要在边距上做一些调整)
  • 3个http://codepen.io/cimmanon/pen/oryHJ
票数 2
EN

Code Review用户

发布于 2014-06-18 16:32:45

在您的标记中有一些潜在的“陷阱”。当您需要维护和更新站点时，这些东西会回来困扰您(或者将来会有其他人)。

让我解释一下引导网格，这样你就会明白为什么我要推荐我所做的改变网格由三个部分组成:一个容器、一行和一个列(S)。您已经知道这一点，但是仔细看看它是如何和为什么会这样工作的：

容器，无论是在.container中还是在容器流体中，都有15 in的填充。行用-15 of的边距否定容器填充。列有15 of的填充，将内容从容器的边缘拉出，并创建一个一致的30 of凹槽。

添加15 of的填充(仅被负行边距否定)的目的似乎很愚蠢，但必须允许在其他列中嵌套列！请注意，在下面的图表中，红色大纲所表示的嵌套列是如何整齐地插入到封闭列中的，而不需要添加额外的填充。

因此，在我看来，给身体增加额外的填充是更有意义的。然后容器和容器流体类正常工作。此外，您还可以消除页面上所有不必要的容器流体div，只需要一个。这将使整个过程变得更加容易以后，如果其他人有引导知识需要在您的网站上工作，它将保持标记到最低限度。

下一步，您可以做的事情，以简化您的标记是删除所有的col 12类，从所有的地方，您有-xs-12和col 12。这是不必要的。将col-*-*类看作是可加性的。如果希望您的设计从一个断点到另一个断点的行为相同，则不需要为该断点添加一个col类。

当你在做的时候，你可以删除一些额外的行。行的唯一目的是拆分需要确保清除浮动的内容。因此，在本例中，您可以使用一行作为主要内容，只需将行类添加到页脚标记中即可。

为了与上一篇文章中的一些关键建议保持一致，您还应该删除无效的标记，对标题使用适当的语义标记，并为html选择器设置样式，而不是添加不需要的类。

所以现在我们要做的是如何处理这些图像。需要发生两件事: 1.在所有断点上，图像需要扩展到填充区以外，并触摸屏幕的边缘；2.如果图像被设置为不跨越屏幕全部宽度的列，则最左边和最右边的图像需要保留它们的内部凹槽。为了实现这一点，您可以将图像包装在一个包含元素中，并给它一些负值，就像行是如何工作的一样。为了与移动第一种方法保持一致，我创建了三个类：. keeping full，.keeping左侧，.keeping右，所有这些类的边距:0-35 In；应用。然后，我添加了一个媒体查询，删除右和左图像的内部边距，其中左图像获得边距-右: 0，右图像获得边距-左:0。

这使您的设计更加灵活！如果您的客户/老板/任何东西，想要做一个小的改变，并添加第三列的设计。没有问题，也不需要额外的标记或css，只要把你的列和你的图像放在中间，所有的东西都会很好地排列起来。

好吧，最后，让我们来处理导航问题。你导航中心的容器液把事情弄得一团糟。这也是为什么你在屏幕底部看到滚动条的部分原因。另外，额外的标记可能会限制您利用一些核心的引导导航功能，例如，如果您想要改变元素的浮动方式，可以添加导航条-右或导航条-左类。所以，我把所有的东西都带回到了基础上，只是对标记进行了样式化，以匹配您的现有设计在我的屏幕上的外观。我不太明白您所说的“以菜单为中心”是什么意思，因为我看到您的代码依赖于未折叠的导航向左浮动。

我做了两个额外的小调整，你的css为导航: 1。在我的屏幕上的箭头后，链接是不对齐的。一个更好的方法比试图从顶部调整这些元素的填充和调整不同分辨率的边距，仅仅是将它们从底部定位。2.此外，我发现您的导航在某些分辨率下进入下一行，因此我添加了一个媒体查询，以确保它在所有分辨率上都保持不变。

下面是最后的标记：

代码语言：javascript
复制
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img src="http://php.atservers.net/test/images/logo.png" alt="">
            </a>
        </div><!-- //.navbar-header -->
        <div class="collapse navbar-collapse" id="navbar-collapsed">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Bird Information</a></li>
                <li><a href="#">Contact</a></li>
            </ul><!-- //.navbar-nav -->
        </div> <!-- //.navbar-collapse -->
    </nav>
    <div class="container-fluid">
        <div class="col-img-full">
            <img src="http://php.atservers.net/test/images/bird-main.png" alt="Hi, I'm a Bird">
        </div><!-- //.column -->
        <main class="row" role="main">
            <div class="col-xs-12">
                <h1>Find Birds In Your Area</h1>
                <select name="" id="">
                    <option value="" selected>Select Your Region</option>
                    <option value="">CA</option>
                    <option value="">FL</option>
                    <option value="">WA</option>
                </select>
            </div><!-- //.column -->
            <div class="col-xs-12">
                <h2>We're Really Into Birds</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p>
            </div><!-- //.column -->
            <div class="col-sm-6 section">
                <div class="col-img-left">
                    <img src="http://php.atservers.net/test/images/tree-birds.png">
                </div>   
                <h2>Even Birds in Trees</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam excepturi voluptates harum fugit enim non, id porro repellendus soluta cupiditate consequuntur dignissimos dolorem sint corporis, illo aliquam blanditiis hic nam.</p>
                <a href="#" class="section-link"><i class="fa fa-caret-right"></i>Learn more about trees (and birds)</a>
            </div> <!-- //.column .section-->
            <div class="col-sm-6 section">
                <div class="col-img-right">
                    <img src="http://php.atservers.net/test/images/all-birds.png">
                </div>   
                <h2>All Kinds of Birds</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est tenetur, reprehenderit at odio sit cumque neque placeat impedit praesentium soluta dolorum architecto qui molestias facilis voluptatibus, ut unde. Tenetur, provident.</p>
                <a href="#" class="section-link"><i class="fa fa-caret-right"></i>Learn more about trees (and birds)</a>
            </div> <!-- //.column .section -->
        </main><!-- //.row -->
        <footer class="row">
            <div class="col-xs-12">
                <div class="footer-credits">
                    <p class="text-muted">® Registered trademark of An Amazing Company Name, an affiliate of independent Canadian birds</p>
                    <p class="text-muted">© Copyright 2014 An Amazing Company Name</p>
                </div> <!-- //.footer-credits -->
                <ul class="footer-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Terms of Use</a></li>
                </ul>
            </div><!-- //.column -->
        </footer> <!-- //.row -->
    </div> <!-- //.container-fluid -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://php.atservers.net/test/js/bootstrap.min.js"></script>
</body>

下面是最后的样式(基于您的自定义引导css文件)：

代码语言：javascript
复制
body {
    padding: 0 20px;    
}
a, h1, h2, h3, h4, h5, h6 {
    color: #ff6600;
}
h1 {
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}
h2 {
    font-weight: normal;
    font-size: 28px;
    padding-top: 36px;
    padding-bottom: 16px;
}
img {
    height: auto;
    width: 100%;
    display: block;
}
select {
    width: 100%;
    padding: 0 10px;
    background-color: #ffffff;
    height: 60px;
    font-size: 24px;
    color: #c7c7cc;
    border: 2px solid #c7c7cc;
    border-radius: 4px;
    -webkit-appearance: none;
    background: url('../images/dropdown-arrow.png') no-repeat right;
    background-position: 98%;
}
.section p {
    color: #999999;
    font-size: 18px;
}
a .fa-caret-right {
  padding-right: 10px;
}
.col-img-full, .col-img-left, .col-img-right {
    margin: 0 -35px;
}
/* Navbar Styles */
.navbar{
  min-height: 158px;
  background-color: #ffffff;
  margin-bottom: 0;
  border: none;
}
.navbar-default{
  border: none;
}
.navbar-brand {
  margin-top: 36px;
}
.navbar-default .navbar-toggle{
  margin-top: 58px;
}
.navbar-default .navbar-collapse{
  border-color: transparent;
}
.navbar-collapse.in, .collapsing{
  margin-top: 65px;
}
/* Navbar Colors and Fonts */
.navbar-nav{
  background-color: #ff6600;
  padding: 0 30px;
  margin-left: 20px;
}
.navbar-default .navbar-nav > li > a{
  color: #fff;
  border-top: 1px solid #fff;
  margin-top: 50px;
}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{
  background-color: transparent;
  color: #fff;
  border-top: none;
  margin-top: 51px; 
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
  color: #fff;
}
/* //Navbar Colors and Fonts */
.nav li:before{
    position: absolute;
    font-family: 'Glyphicons Halflings';
    content: "\e080";
    right: 0;
    color: #fff;
     bottom: 15px;
}
/* //Navbar Styles */
/* Nav Media Queries Helpers */
/* removes the margins so the navigation menu stays inline with brand before collapsing */
@media (min-width: 848px) and (max-width: 955px) { 
  .navbar-nav {
    margin: 0 -40px 0 0;
  }
}
/* Logo img resizes below 482px */

@media screen and (max-width: 482px){
  .navbar-brand{
    width: 70%;
    margin-top: 40px;
    height: auto;
  }
}
/* //Logo img resizes below 482px */
/* //Nav Media Queries Helpers */
/* Image Media Queries Helpers */
/* Remove margin on one side for images in left or right columns that extend beyond body padding */
@media screen and (min-width: 767px){
    .col-img-left {
        margin-right: 0;
    }

    .col-img-right {
        margin-left: 0;
    }
}
/* //Image Media Queries Helpers */
/* Footer Styles*/
footer{
  margin-top: 80px;
}
.footer-credits{
  border-top: 1px solid #c7c7cc;
}
.footer-nav{
  list-style: none;
  padding-left: 0;
}
.footer-nav li{
  float: left;
  padding: 5px;
}
.footer-nav li a{
  border-right: 1px solid #c7c7cc;
  padding-right: 10px;
}
.footer-nav li:last-child a{
  border-right: none;
}
/* Footer Styles */

所有这些建议都将带来更干净、更易于维护和更多的语义标记。我希望你发现其中的一些或全部是有帮助的！祝你好运。

票数 1
EN
页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://codereview.stackexchange.com/questions/54253

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档