1. 首頁
  2. 問答
  3. 修復麪包屑

修復麪包屑

2017-06-16 190 views
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

來源

2017-06-16 Dukakus17

回答

2

你可以使用@media（最大寬度：408px）{的.class {}}它會爲你和我有幫助更新你的提琴check the updated fiddle

嘗試使用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>

來源

2017-06-16 04:41:42

+0

謝謝！有沒有辦法擺脫黑色背景？ – Dukakus17

+0

是的，你可以改變，你需要什麼顏色 –

+0

我只是想讓它消失。並只顯示箭頭欄。 – Dukakus17

2

繼續Udhay回答。清單2鏈接可能會對您有所幫助。你可以把它當作multi-step

DEMO

調整大小，看看各項工作。希望它能在未來幫助你。

以前

enter image description here

後

enter image description here

來源

2017-06-16 05:02:19 Hash

相關問題

 相關問題