修复面包屑的响应性

时间：2017-06-16 04:14:28

标签： javascript html css

＆＃13;
＆＃13; 
.breadcrumb input[type="radio"] {
  display: none;
}

.breadcrumb input[type="checkbox"] {
  display: none;
}

.question-header input[type="radio"] {
  display: none;
}

.panel-body input[type="radio"]~label {
  cursor: pointer;
  width: 100%;
  text-align: center;
  padding: 10px 15px;
  margin: 0;
}

.panel-body input[type="radio"]:checked~label {
  background: #6FA8DC;
  color: white;
}

.breadcrumb {
  background: black;
  display: inline-block;
  padding: 1px;
  padding-right: 18px;
}

.breadcrumb a {
  display: inline-block;
  background: white;
  padding: 5px 30px 5px 30px;
  position: relative;
  text-decoration: none;
  -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
  margin-right: -17px;
}

.breadcrumb a#last {
  -webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
  clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
}

.breadcrumb a:hover {
  color: white;
  background: #369F00;
}


/* first link should not have anything cliped on the left side */

.breadcrumb a:first-child {
  -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  padding-left: 20px;
}

.label {
  height: 100%;
  width: 100%;
}
＆＃13; 
<div class="breadcrumb">


  <a href="#" data-toggle="modal" data-target="#inviteModal" id="invite-breadcrumb">
    First
  </a>

  <a href="#" data-bind="css:{selected:applicationsFilter() === 'new'}">
    <label class="radio-inline" data-bind="css:{selected:applicationsFilter() === 'new'}">
      <input type="radio" value="new" data-bind="checked: applicationsFilter, css:{selected:applicationsFilter() === 'new'}" class="radcss" name="app" id="newapp">
      Second
    </label>
  </a>

  <a href="#" data-bind="css:{selected:applicationsFilter() === 'shortlisted'}">
    <label class="radio-inline" data-bind="css:{selected:applicationsFilter() === 'shortlisted'}">
      <input type="radio" value="shortlisted" data-bind="checked: applicationsFilter, css:{selected:applicationsFilter() === 'shortlisted'}" class="radcss" name="app" id="shortapp">
      Third
    </label>
  </a>

  <a href="#" data-bind="css:{selected:applicationsFilter() === 'connected'}" id="last">
    <label class="radio-inline" data-bind="css:{selected:applicationsFilter() === 'connected'}">
      <input type="radio" value="connected" data-bind="checked: applicationsFilter, css:{selected:applicationsFilter() === 'connected'}" class="radcss" name="app" id="connapp">
      Fourth
    </label>
  </a>

</div>
＆＃13;
＆＃13;
＆＃13;

当窗口大小足够大时，它可以正常工作：

enter image description here

但是当我缩小窗口大小时，它会变得如此丑陋。 请帮助我使它响应和整洁。我还想删除缩小它时出现的黑色背景。

enter image description here

2 个答案:

答案 0 :(得分：2)

你可以使用@media（max-width：408px）{。class {}}它会对你有所帮助，我更新你的小提琴check the updated fiddle

尝试在.breadcrumb中使用webkit过滤器

@media (max-width: 408px) { 
     .breadcrumb {
            background: none;
             -webkit-filter: drop-shadow(1px 1px 0px black)
        drop-shadow(1px -1px 0px black)
        drop-shadow(-1px 1px 0px black)
        drop-shadow(-1px -1px 0px black);
      filter: drop-shadow(1px 1px 0px black)
        drop-shadow(1px -1px 0px black)
        drop-shadow(-1px 1px 0px black)
        drop-shadow(-1px -1px 0px black);
            }
}


    .breadcrumb input[type="radio"] {
        display: none;
    }

    .breadcrumb input[type="checkbox"] {
        display: none;
    }

    .question-header input[type="radio"] {
        display: none;
    }

    .panel-body input[type="radio"] ~ label {
        cursor: pointer;
        width: 100%;
        text-align: center;
        padding: 10px 15px;
        margin: 0;
    }

    .panel-body input[type="radio"]:checked ~ label {
        background: #6FA8DC;
        color: white;
    }

    .breadcrumb {
        background: black;
        display: inline-block;
        padding: 1px;
        padding-right: 18px;

    }

    .breadcrumb a {
        display: inline-block;
        background: white;
        padding: 5px 30px 5px 30px;
        position: 6elative;
        min-width:50px;
        text-decoration: none;
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        margin-right: -17px;
    }

    .breadcrumb a#last {
        -webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
    }

    .breadcrumb a:hover {
        color: white;
        background: #369F00;
    }

    /* first link should not have anything cliped on the left side */
    .breadcrumb a:first-child {
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
        padding-left: 20px;
    }

    .label{
        height: 100%;
        width: 100%;
    }
   
    @media (max-width: 408px) {
      .breadcrumb a {
        display: inline-block;
        background: white;
        padding: 5px 30px 5px 30px;
        position: relative;
        min-width:40%;
        border:1px solid black;
        text-decoration: none;
          -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
        padding-left: 20px;
        margin-right: -17px;
    }
  .breadcrumb a#last {
         -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
        padding-left: 20px;
    }
      .breadcrumb {
        background: none;
         -webkit-filter: drop-shadow(1px 1px 0px black)
    drop-shadow(1px -1px 0px black)
    drop-shadow(-1px 1px 0px black)
    drop-shadow(-1px -1px 0px black);
  filter: drop-shadow(1px 1px 0px black)
    drop-shadow(1px -1px 0px black)
    drop-shadow(-1px 1px 0px black)
    drop-shadow(-1px -1px 0px black);
        }
    }
<div class="breadcrumb">


  <a href="#" data-toggle="modal" data-target="#inviteModal" id="invite-breadcrumb">
    First
  </a>

  <a href="#" data-bind="css:{selected:applicationsFilter() === 'new'}">
    <label class="radio-inline" data-bind="css:{selected:applicationsFilter() === 'new'}">
      <input type="radio" value="new" data-bind="checked: applicationsFilter, css:{selected:applicationsFilter() === 'new'}" class="radcss" name="app" id="newapp">
      Second
    </label>
  </a>

  <a href="#" data-bind="css:{selected:applicationsFilter() === 'shortlisted'}">
    <label class="radio-inline" data-bind="css:{selected:applicationsFilter() === 'shortlisted'}">
      <input type="radio" value="shortlisted" data-bind="checked: applicationsFilter, css:{selected:applicationsFilter() === 'shortlisted'}" class="radcss" name="app" id="shortapp">
      Third
    </label>
  </a>

  <a href="#" data-bind="css:{selected:applicationsFilter() === 'connected'}" id="last">
    <label class="radio-inline" data-bind="css:{selected:applicationsFilter() === 'connected'}">
      <input type="radio" value="connected" data-bind="checked: applicationsFilter, css:{selected:applicationsFilter() === 'connected'}" class="radcss" name="app" id="connapp">
      Fourth
    </label>
  </a>

</div>

答案 1 :(得分：2)

进一步 Udhay 回答。清单2可能对您有所帮助的链接。您可以将其设为multi-step

DEMO

调整大小并查看每项工作方式。希望它能帮助你。

<强>之前

enter image description here

<强>后

enter image description here

相关问题
最新问题