logo标签列表

修复面包屑导航的响应式设计问题

javascripthtmlcss
4

.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%;
}
<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>

当窗口尺寸足够大时，它可以正常工作，如下所示:

enter image description here

但是当我缩小窗口尺寸时，它变得非常丑陋。请帮我使其具有响应性并整洁。我还想删除缩小时出现的黑色背景。

enter image description here

2个回答
2
您可以使用@media (max-width: 408px) { .class{ }}，这对您有帮助，我已更新了您的fiddle。查看更新后的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>

谢谢！有没有什么方法可以去掉那个黑色背景呢？ - Dukakus17
我只想让它消失。并且只显示箭头条。 - Dukakus17
只需将背景属性更改为'none'，就像这样：'background:none'。我已更新我的答案，请检查。 - Udhay Titus
太棒了！你知道如何在箭头条缩小时添加边框吗？我尝试添加它，但它不起作用。 - Dukakus17
谢谢您先生！它真的帮了我很多！ - Dukakus17
2
< p >除了 Udhay 的回答之外，以下两个链接可能会对您有所帮助。您可以使用多步骤来实现它。

演示

调整大小并查看每个工作原理。希望这能在未来对您有所帮助。

之前

enter image description here

之后

enter image description here

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接