CSS サッカー場を作成するアプリケーションに Twitter ブートストラップを使用しています。私は当初、アプリケーションに Twitter ブートストラップをダウンロードしてドロップすることでアプリケーションを構築していました。しかし、LESS を利用するために、Rails アプリケーション用の gem を使用して Twitter ブートストラップをインストールする新しいアプリケーションを作成しました。この新しいアプリケーションでは、ブラウザのサイズを変更すると、サッカー場のサイズが変更されます (見栄えが悪くなります)。古いアプリケーションでは、ブラウザーのサイズを変更でき、フィールドは同じままでした。これまでのところ、私が使用している CSS はまったく同じで (つまり、この新しいアプリケーションに LESS を含めていません)、HTML も同じです。したがって、どのコードを含めるかはよくわかりません。この質問。私が何から
サッカー場のコードは次のとおりです。元のアプリケーションでは機能していたので、このマークアップを変更しても違いが生じるかどうかはわかりませんが、レイアウトは変更されていません。
注意してください、レスポンシブ Web サイトのアイデアが好きですが、サッカー場を同じサイズに保つ必要があるため、サイズが変更されないように css でできることがあれば満足です。
<div class="span3 field">
<div class="row endzonenorth">
</div>
<div class="row field">
<span class="qb"></span>
<div class="horizontalRule">
<span class="funnyzone"> END ZONE</span>
</div>
<div class="horizontalRule">
<div class="number right">10</div>
<div class="number left">10</div>
</div>
<div class="horizontalRule">
<div class="number right">20</div>
<div class="number left">20</div>
</div>
<div class="horizontalRule">
<div class="number right">30</div>
<div class="number left">30</div>
</div>
<div class="horizontalRule">
<div class="number right">40</div>
<div class="number left">40</div>
</div>
<div class="horizontalRule">
<div class="number right">50</div>
<div class="number left">50</div>
</div>
<div class="horizontalRule">
<div class="number right">40</div>
<div class="number left">40</div>
</div>
<div class="horizontalRule">
<div class="number right">30</div>
<div class="number left">30</div>
</div>
<div class="horizontalRule">
<div class="number right">20</div>
<div class="number left">20</div>
</div>
<div class="horizontalRule">
<div class="number right">10</div>
<div class="number left">10</div>
</div>
<div class="horizontalRule">
<span class="funnyzonesouth">END ZONE</span>
</div>
</div>
<div class="row endzonesouth">
</div>
</div>
CSS:
div.horizontalRule
{
clear:both;
width:100%;
background-color:#fff;
height:1px;
margin-top:30px;
margin-bottom:30px;
display: block;
opacity: .75;
}
.number.right{
color: #fff;
position: absolute;
right: 40px;
margin-top: -10px;
}
.number.left{
color: #fff;
position: absolute;
left: 40px;
margin-top: -10px;
}
.funnyzone{
opacity: .75;
/*top: 7px;*/
position: absolute;
color: #fff;
font-size: 22px;
margin-top: -25px;
margin-left: 15px;
}
.funnyzonesouth{
font-size: 22px;
color: #fff;
opacity: .75;
margin-top: 4px;
margin-left: 40px;
/*bottom: -3px;*/
position: absolute;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
.span3.field{
background-color: rgb(96, 211, 43);
}
.row.field{
width: 90%;
background-color: #56a636;
position: relative;
margin-left: auto;
margin-right: auto;
}
.row.endzonenorth{
width: 90%;
height: 25px;
background-color: #56a636;
color: #fff;
font-size: 22px;
margin-left: auto;
margin-right: auto;
}
.row.endzonesouth{
width: 90%;
height: 25px;
background-color: #56a636;
color: #fff;
font-size: 24px;
margin-left: auto;
margin-right: auto;
}
.row.endzone{
height: 30px;
background-color: #56a636;
}
.line {
color: white;
display: block;
padding-top: 10px;
padding-bottom: 10px;
opacity: 0.55,
}
.linea{
padding-top: 10px;
padding-bottom: 10px;
color: white;
display:block;
}
.leftvertical {
width:1px;
height:410px;
background-color:#fff;
opacity: .55;
position: absolute;
left:50px;
}
.rightvertical {
width:1px;
height:410px;
background-color:#fff;
opacity: .55;
position: absolute;
right:50px;
}
.number.left
{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.number.right
{
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
}
.row.endzone{
width: 90%;
}
.row.endzone2{
width: 90%;
}
.qb{
position: absolute;
width: 50px;
height: 50px;
background-image: url('/assets/qb.png');
/*background-color: #fff;*/
left: 75px;
top: 300px;
visibility:hidden;
}
.span4.offset4{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 25px;
font-weight: bold;
min-height: 30px;
text-align: center;
/*width: 100%;*/
display: inline-block;
}
.row.main{
padding-top: 20px;
}
.span6.offset2{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/*font-size: 25px;*/
padding-top: 10px;
font-size: 16px;
font-weight: bold;
min-height: 30px;
text-align: center;
/*width: 100%;*/
display: inline-block;
}