个人中心
gpt4 book ai didi

twitter-bootstrap - 在 Bootstrap 中创建响应式功能区标题

转载 作者：行者123 更新时间：2023-11-28 08:36:12 25 4
gpt4 key购买 nike

<分区>

我如何在 bootstrap 中创建一个功能区标题并且我需要响应，最好的方法是如果这个标题将分成两部分，我的意思是左边和右边，功能区必须看起来像这样:

enter image description here

我的代码是:

 .ribbon {
   font-size: 16px !important;
   /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
   width: 75%;
   position: relative;
   background-color: #fafafa;
   background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
   background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
   background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
   background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
   background-repeat: repeat-x;
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
   border: 1px solid #d4d4d4;
   color: #fff;
   text-align: center;
   padding: 1em 2em;
   /* Adjust to suit */
   margin: 2em auto 3em;
   /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
 }
 .ribbon:before,
 .ribbon:after {
   content: "";
   position: absolute;
   display: block;
   bottom: -1em;
   border: 1.5em solid #f2f2f2;
   /*side ribbons*/
   z-index: -1;
 }
 .ribbon:before {
   left: -2em;
   border-right-width: 1.5em;
   border-left-color: transparent;
 }
 .ribbon:after {
   right: -2em;
   border-left-width: 1.5em;
   border-right-color: transparent;
 }
 .ribbon .ribbon-content:before,
 .ribbon .ribbon-content:after {
   content: "";
   position: absolute;
   display: block;
   border-style: solid;
   border-color: #e2e2e2 transparent transparent transparent;
   bottom: -1em;
 }
 .ribbon .ribbon-content:before {
   left: 0;
   border-width: 1em 0 0 1em;
 }
 .ribbon .ribbon-content:after {
   right: 0;
   border-width: 1em 1em 0 0;
 }
<div class="navbar ribbon">
  <div class="navbar-inner ribbon-content">
    <div class="container">
      <ul class="nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#">Projects</a>
        </li>
        <li><a href="#">Services</a>
        </li>
        <li><a href="#">Downloads</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- /.navbar -->

谢谢

25 4 0
文章推荐： javascript - Jasmine spy 返回空的mostRecentCall 对象
文章推荐： javascript - Selenium IDE gotoif 变量包含字符串？
文章推荐： css - Flexbox 子项不尊重具有 flex-direction 列的父项的高度
文章推荐： Javascript 或 jQuery 表单验证仅用于精确操作
行者123
个人简介

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

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