Question

我正在使用Twitter bootstrap来创建一个CSS足球场的应用程序。我最初通过下载并将Twitter引导程序下载到我的应用程序中来构建应用程序。但是，为了利用LESS，我创建了一个新的应用程序，我在其中安装了Twitter bootstrap和Rails应用程序的gem。在这个新的应用程序中，如果我改变浏览器的大小，足球场的尺寸将会改变（看起来很糟糕）。在旧的应用程序中，我可以调整浏览器的大小，并且字段将保持不变。到目前为止，我使用的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">&nbsp; &nbsp; &nbsp;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;

}

Answer 1

您似乎使用相对宽度尺寸，即100％。而是尝试使用绝对宽度，即500px;或者，尝试为容器设置宽度。

.span3.field{
    width:500px;
    background-color: rgb(96, 211, 43);
}

希望这有一些帮助。

如何阻止html / css对象调整大小

1 个答案: