0
現在、ブートストラップWebフレームワークで作業中ですが、ボタン内部のテキストサイズに合わせてすべてのボタングループを整列する方法に問題がありますか？ブートストラップボタングループが同じサイズでない
htmlファイル：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Button Groups</title>
<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">
<script src="{{ url_for('static',filename='js/jquery.min.js') }}"></script>
<script src="{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
<style>
.flash-button{
animation-name: flash;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
//Firefox 1+
-webkit-animation-name: flash;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
//Safari 3-4
-moz-animation-name: flash;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
@keyframes flash {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
//Firefox 1+
@-webkit-keyframes flash {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
//Safari 3-4
@-moz-keyframes flash {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
.btn-space {
margin-bottom: 15px;
}
.responsive-width {
font-size: 3vw;
}
.btn{
white-space:normal !important;
word-wrap:break-word;
}
</style>
</head>
<body>
<div class="container">
<h2>Button Groups</h2>
<div class = "row btn-space">
<div class="btn-group col-xs-12">
<button type="button" id="button1" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button1')">User</button>
<button type="button" id="button2" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button2')">Status 2</button>
<button type="button" id="button3" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button3')">Status 3</button>
<button type="button" id="button4" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button4')">Status 4</button>
</div></br></br>
</div>
<div class = "row btn-space">
<div class="btn-group col-xs-12">
<button type="button" id="button5" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button5')">Status 1</button>
<button type="button" id="button6" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button6')">Status 2</button>
<button type="button" id="button7" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button7')">Status 3</button>
<button type="button" id="button8" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button8')">Status 4</button>
</div></br></br>
</div>
<div class = "row btn-space">
<div class="btn-group col-xs-12">
<button type="button" id="button9" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button9')">Status 1</button>
<button type="button" id="button10" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button10')">Status 2</button>
<button type="button" id="button11" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button11')">Status 3</button>
<button type="button" id="button12" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button12')">Status 4</button></div></br></br>
</div>
</div>
<script>
var button1 = 1;
var button2 = 1;
var button3 = 1;
var button4 = 1;
function changeClass(btn) {
var property = document.getElementById(btn);
switch(btn){
case 'button1':
if (button1 == 0) {
property.className = 'btn btn-default btn-lg col-xs-3';
button1 = 1;
}
else {
document.getElementById('button2').className = 'btn btn-default btn-lg col-xs-3';
document.getElementById('button3').className = 'btn btn-default btn-lg col-xs-3';
document.getElementById('button4').className = 'btn btn-default btn-lg col-xs-3';
property.className += 'btn btn-success btn-lg flash-button col-xs-3';
button1 = 0;
button2 = 1;
button3 = 1;
button4 = 1;
}
break;
case 'button2':
if (button2 == 0) {
property.className = 'btn btn-default btn-lg col-xs-3';
button2 = 1;
}
else {
document.getElementById('button1').className = 'btn btn-default btn-lg col-xs-3';
document.getElementById('button3').className = 'btn btn-default btn-lg col-xs-3';
document.getElementById('button4').className = 'btn btn-default btn-lg col-xs-3';
property.className += 'btn btn-warning btn-lg flash-button col-xs-3';
button2 = 0;
button1 = 1;
button3 = 1;
button4 = 1;
}
break;
case 'button3':
if (button3 == 0) {
property.className = 'btn btn-default btn-lg col-xs-3';
button3 = 1;
}
else {
document.getElementById('button1').className = 'btn btn-default btn-lg col-xs-3';
document.getElementById('button2').className = 'btn btn-default btn-lg col-xs-3';
document.getElementById('button4').className = 'btn btn-default btn-lg col-xs-3';
property.className += 'btn btn-danger btn-lg flash-button col-xs-3';
button3 = 0;
button1 = 1;
button2 = 1;
button4 = 1;
}
break;
case 'button4':
if (button4 == 0) {
property.className = 'btn btn-default btn-lg col-xs-3';
button4 = 1;
}
else {
document.getElementById('button1').className = 'btn btn-default btn-lg col-xs-3';
document.getElementById('button2').className = 'btn btn-default btn-lg col-xs-3';
document.getElementById('button3').className = 'btn btn-default btn-lg col-xs-3';
property.className += 'btn btn-danger btn-lg flash-button col-xs-3';
button4 = 0;
button1 = 1;
button2 = 1;
button3 = 1;
}
break;
}
}
</script>
</body>
</html>
あなたは第一ボタンが組み込まグループに整列されていない見ることができるように。
ホープ誰かが私を助けることができます。
こんにちは先生があなたの肯定的な反応をありがとうございましたが、コードスニペットを実行しようとしているイムは、コピーしてHTMLを作成するためにそれを貼り付けるために比較するとき、それは持っていますruncodeスニペットは、私がコピーして貼り付けたスニペットと比較して、私のlocalhostをチェックする方がはるかに多いのですか？ – iamcoder
こんにちは、私はいくつかのマイナーな問題を修正するために働くことができました。 ボタンのサイズを変更する際に、ボタンの内側にテキストを固定するにはどうすればよいですか？ – iamcoder
私はそれをクロムで実行し、F12を押してs5に設定すると、アライメントが再び整列されず、テキストも消えますか？それを修正する方法はありますか？ – iamcoder