我正在将 Twitter 引导程序用于制作 CSS 足球场的应用程序。我最初是通过下载 Twitter 引导程序并将其放入我的应用程序来构建应用程序的。然而，为了利用 LESS，我创建了一个新应用程序，在其中安装了带有用于 Rails 应用程序的 gem 的 Twitter 引导程序。在这个新应用程序中，如果我改变浏览器的大小，足球场的尺寸就会改变（看起来很糟糕）。在旧应用程序中，我可以调整浏览器的大小，并且该字段将保持不变。到目前为止，我使用的 CSS 完全相同（即我没有在这个新应用程序中包含任何 LESS）并且 HTML 也是相同的，因此，我不确定要包含哪些代码这个问题。从我的
这是足球场的代码，虽然因为它在我的原始应用程序中工作，我不知道用这个标记改变任何东西是否会有所不同，但布局也没有改变。
请注意，我喜欢响应式网站的想法，但是，我需要足球场保持相同的大小，所以如果可以使用 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;
}