[Bootstrap3] btn-group をレスポンシブに対応させる

今現在のBootstrap3では、btn-groupはレスポンシブに対応されていません。
今後のアップデートで追加されるかもしれませんが、個人的に使う機会があったので公開します。

@media (max-width: 767px) {
	.btn-group {
		width: 100%;
		
	}
	.btn-group .btn {
		display: block;
		width: 100%;
		padding-right: 0;
		margin-bottom: 2px;
		text-align: left;
	}
	
	.btn-group .open .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin-top: 0;
		background-color: #ffffff;
		border: 0;
		box-shadow: none;
	}
	.btn-group .open .dropdown-menu > li > a,
	.btn-group .open .dropdown-menu .dropdown-header {
		padding: 5px 15px 5px 25px;
	}
	.btn-group .open .dropdown-menu > li > a {
		line-height: 20px;
	}
	.btn-group .open .dropdown-menu > li > a:hover,
	.btn-group .open .dropdown-menu > li > a:focus {
		color: inherit;
		background: #dddddd;
	}
}

私が使用した範囲のクラスのみしか書いていませんが、簡単なものであればだいたい適応されるはずです。
必要に応じてクラスを追加してください。また、細かいデザインも必要に応じて変えてください。

twitterfacebookhatenafacebook