Bootstrap4でスマホのときだけ改行させる方法

テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

PCのときだけ改行する場合

テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

スマホ用シンプルでアレンジ可能なパンクズリストの作成

 

スマホ用のパンクズリストのご紹介です。

シンプルで使いやすいものになります。

これを参考にアレンジ可能だと思います。

 

 

■HTML

<ul id="breadcrumbs">
<li><a href=""><img src="images/home.png" alt="home" width="27"></a></li>
<li><a href="">NEXT PAGE</a></li>
<li><a href="">NEXT PAGE</a></li>
<li><a href="">NEXT PAGE</a></li>
<li>NEXTNEXTNEXT PAGE</li>
</ul>

 

 

■CSS

#breadcrumbs{
background: #fff;
border-width: 1px;
border-style: solid;
border-color: #ccc;
border-radius: 5px;
overflow: hidden;
width: 100%;
}

#breadcrumbs li{
float: left;
}

#breadcrumbs a{
padding: .9em 1em .9em 2em;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #eee;
}

#breadcrumbs li:first-child a{
padding: 0.6em 0.3em 0.6em 0.5em;
}

#breadcrumbs a:hover{
background: #fff;
}

#breadcrumbs a::after,
#breadcrumbs a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}

#breadcrumbs a::after{
z-index: 2;
border-left-color: #eee;
}

#breadcrumbs a::before{
border-left-color: #ccc;
right: -1.1em;
z-index: 1;
}

#breadcrumbs a:hover::after{
border-left-color: #fff;
}

#breadcrumbs li:last-child{
font-weight: bold;
background: none;
padding: .9em 1em .9em 2em;
}