引导程序中的全屏宽度面包屑

时间：2017-02-08 15:22:49

标签： html css3 twitter-bootstrap-3

我想将全屏宽度痕迹显示在我的网站上作为步骤1步骤2步骤3.使用箭头并且还需要在步骤1附近显示图像。

但问题是，面包屑只显示屏幕的一半。

＆＃13;
＆＃13; 
/** The Magic **/

.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 100%;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid rgb(173, 173, 173);
  position: absolute;
  top: 50%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}
/** The Spacing **/

.btn-breadcrumb .btn {
  padding: 6px 12px 6px 24px;
}
.btn-breadcrumb .btn:first-child {
  padding: 6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
  padding: 6px 18px 6px 24px;
}
/** Default button **/

.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}
/** Primary button **/

.btn-breadcrumb .btn.btn-primary:not(:last-child):after {
  border-left: 10px solid #428bca;
}
.btn-breadcrumb .btn.btn-primary:not(:last-child):before {
  border-left: 10px solid #357ebd;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after {
  border-left: 10px solid #3276b1;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):before {
  border-left: 10px solid #285e8e;
}
/** Success button **/

.btn-breadcrumb .btn.btn-success:not(:last-child):after {
  border-left: 10px solid #5cb85c;
}
.btn-breadcrumb .btn.btn-success:not(:last-child):before {
  border-left: 10px solid #4cae4c;
}
.btn-breadcrumb .btn.btn-success:hover:not(:last-child):after {
  border-left: 10px solid #47a447;
}
.btn-breadcrumb .btn.btn-success:hover:not(:last-child):before {
  border-left: 10px solid #398439;
}
/** Danger button **/

.btn-breadcrumb .btn.btn-danger:not(:last-child):after {
  border-left: 10px solid #d9534f;
}
.btn-breadcrumb .btn.btn-danger:not(:last-child):before {
  border-left: 10px solid #d43f3a;
}
.btn-breadcrumb .btn.btn-danger:hover:not(:last-child):after {
  border-left: 10px solid #d2322d;
}
.btn-breadcrumb .btn.btn-danger:hover:not(:last-child):before {
  border-left: 10px solid #ac2925;
}
/** Warning button **/

.btn-breadcrumb .btn.btn-warning:not(:last-child):after {
  border-left: 10px solid #f0ad4e;
}
.btn-breadcrumb .btn.btn-warning:not(:last-child):before {
  border-left: 10px solid #eea236;
}
.btn-breadcrumb .btn.btn-warning:hover:not(:last-child):after {
  border-left: 10px solid #ed9c28;
}
.btn-breadcrumb .btn.btn-warning:hover:not(:last-child):before {
  border-left: 10px solid #d58512;
}
/** Info button **/

.btn-breadcrumb .btn.btn-info:not(:last-child):after {
  border-left: 10px solid #5bc0de;
}
.btn-breadcrumb .btn.btn-info:not(:last-child):before {
  border-left: 10px solid #46b8da;
}
.btn-breadcrumb .btn.btn-info:hover:not(:last-child):after {
  border-left: 10px solid #39b3d7;
}
.btn-breadcrumb .btn.btn-info:hover:not(:last-child):before {
  border-left: 10px solid #269abc;
}
＆＃13; 
<div class="container">
  <div class="btn-group btn-breadcrumb">

    <a href="#" class="btn btn-default">STEP 1</a>
    <a href="#" class="btn btn-default">STEP 2</a>
    <a href="#" class="btn btn-default">STEP 3</a>
    <a href="#" class="btn btn-default">STEP 4</a>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

一点flexbox魔法。

.btn-group{
  display: flex;
}

.btn-breadcrumb .btn {
  flex-grow: 1;
  text-align: center;
  position: relative;
}

/** The Magic **/

.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 100%;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid rgb(173, 173, 173);
  position: absolute;
  top: 50%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}
/** The Spacing **/

.btn-breadcrumb .btn {
  padding: 6px 12px 6px 24px;
}
.btn-breadcrumb .btn:first-child {
  padding: 6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
  padding: 6px 18px 6px 24px;
}
/** Default button **/

.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}
/** Primary button **/

.btn-breadcrumb .btn.btn-primary:not(:last-child):after {
  border-left: 10px solid #428bca;
}
.btn-breadcrumb .btn.btn-primary:not(:last-child):before {
  border-left: 10px solid #357ebd;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after {
  border-left: 10px solid #3276b1;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):before {
  border-left: 10px solid #285e8e;
}
/** Success button **/

.btn-breadcrumb .btn.btn-success:not(:last-child):after {
  border-left: 10px solid #5cb85c;
}
.btn-breadcrumb .btn.btn-success:not(:last-child):before {
  border-left: 10px solid #4cae4c;
}
.btn-breadcrumb .btn.btn-success:hover:not(:last-child):after {
  border-left: 10px solid #47a447;
}
.btn-breadcrumb .btn.btn-success:hover:not(:last-child):before {
  border-left: 10px solid #398439;
}
/** Danger button **/

.btn-breadcrumb .btn.btn-danger:not(:last-child):after {
  border-left: 10px solid #d9534f;
}
.btn-breadcrumb .btn.btn-danger:not(:last-child):before {
  border-left: 10px solid #d43f3a;
}
.btn-breadcrumb .btn.btn-danger:hover:not(:last-child):after {
  border-left: 10px solid #d2322d;
}
.btn-breadcrumb .btn.btn-danger:hover:not(:last-child):before {
  border-left: 10px solid #ac2925;
}
/** Warning button **/

.btn-breadcrumb .btn.btn-warning:not(:last-child):after {
  border-left: 10px solid #f0ad4e;
}
.btn-breadcrumb .btn.btn-warning:not(:last-child):before {
  border-left: 10px solid #eea236;
}
.btn-breadcrumb .btn.btn-warning:hover:not(:last-child):after {
  border-left: 10px solid #ed9c28;
}
.btn-breadcrumb .btn.btn-warning:hover:not(:last-child):before {
  border-left: 10px solid #d58512;
}
/** Info button **/

.btn-breadcrumb .btn.btn-info:not(:last-child):after {
  border-left: 10px solid #5bc0de;
}
.btn-breadcrumb .btn.btn-info:not(:last-child):before {
  border-left: 10px solid #46b8da;
}
.btn-breadcrumb .btn.btn-info:hover:not(:last-child):after {
  border-left: 10px solid #39b3d7;
}
.btn-breadcrumb .btn.btn-info:hover:not(:last-child):before {
  border-left: 10px solid #269abc;
}
<div class="container">
  <div class="btn-group btn-breadcrumb">

    <a href="#" class="btn btn-default">STEP 1</a>
    <a href="#" class="btn btn-default">STEP 2</a>
    <a href="#" class="btn btn-default">STEP 3</a>
    <a href="#" class="btn btn-default">STEP 4</a>
  </div>
</div>

答案 1 :(得分：0)

引导容器类在桌面屏幕大小（768px以上）上具有固定宽度。因此，您需要将breadcrubs放在容器元素之外，如下所示：

<div class="btn-group btn-breadcrumb">
    <a href="#" class="btn btn-default">STEP 1</a>
    <a href="#" class="btn btn-default">STEP 2</a>
    <a href="#" class="btn btn-default">STEP 3</a>
    <a href="#" class="btn btn-default">STEP 4</a>
</div>
<div class="container">
  <!-- other content -->
</div>

或者您将负边距技巧应用于.btn-breadcrumb div：

.btn-breadcrumb {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  /* ... */
}

HTML：

<div class="container">
  <div class="btn-group btn-breadcrumb">
      <a href="#" class="btn btn-default">STEP 1</a>
      <a href="#" class="btn btn-default">STEP 2</a>
      <a href="#" class="btn btn-default">STEP 3</a>
      <a href="#" class="btn btn-default">STEP 4</a>
  </div>
</div>

50％左边距将元素移动到屏幕中心，减去50vw是屏幕的左角。右侧也是如此，即使将元素放在容器内，元素也是全屏的。

相关问题
最新问题