Question

技术：

Bootstrap 3 减玉角

问题：

我正在使用.col-xs-12.col-md-6作为该部分。

出于某种原因应该从.col-md-6和.col-xs-12切换应该应用，以便列可以拉伸屏幕的整个宽度，布局直到743屏幕才会展开宽度。（它的宽度应该是991px，或者我错了至少767px的屏幕宽度）。

我在.col-md-6上有自定义样式，并且对该类的宽度应用49％bc .col-md-5太小而.col-md-6太大而无法添加所需的20px边距两者之间的空间。（造型指南）。

我删除了宽度：49％;当看到992和768断点会发生什么，什么也没有。

它只是在随机断点处中断。

（我已经测试了col-lg-6和col-xl-6或5的中断位置只是为了测试它并且它继续在没有连接到通常的768,992的断点区域中断1200等。）

我已经从每个地方删除了样式，看看是否会影响它。这是一个包含文件，所以甚至样式连接到主页面。（我把它放回原因不是原因）。

过去这些断点添加工作我不知道现在有什么问题。

我唯一的另一种选择是使用媒体查询，我会在此期间尝试，但我想避免这种情况。

更新

我将代码重新格式化为一个完全独立的文件，并将其放在常规的html中，并且工作正常。我复制并粘贴了最底层的代码。我删除了角度并将其硬编码，以便我可以在浏览器中快速打开。我想它可能与这个项目中的周围文件有关。我复制并粘贴了最底层的代码。

玉文件：

#pizza
    .col-xs-12
        h3 Other Shops
        .col-xs-12.col-md-6(ng-repeat="other in otherShops")
            .col-xs-12(ng-repeat="tag in other.tags | limitTo: 1")
                img(ng-src="{{tag.sm_active_url}}")
                &nbsp;{{tag.name}}
            .col-xs-3
                img(src="http://www.carlotfinance.com/assets/img/car_placeholder.jpg", alt="placeholder image")
            .col-xs-8
                h2
                    a(href="#/shops/{{shop.id}}/detail") {{ other.name }}
                    .glyphicon.glyphicon-road
                    .glyphicon.glyphicon-unchecked
                p {{ other.address }}
                p {{ other.phone }}
            button.btn.col-xs-12.makeAppointmentBtn(type='button', ng-controller='makeAppointmentCtrl', ng-click='open()') Make Appointment

少：

#pizza{

h3{
  color: #999;
}

.col-md-6{
background-color: #ffffff;
border-radius: 8px;
margin-bottom: 50px;
padding-left: 0;
padding-right: 0;
// width: 49%;
min-height: 440px;

&:nth-child(even){
  margin-right: 20px;
}

h2{
  a{
  color: #000;
  }
  a:hover{
    text-decoration: none;
  }
}

.col-xs-3{
margin-left: 20px;
margin-top: 30px;

img{
 width: 100%;
}
}

.btn{
 position: absolute;
 background-color: #003366;
 padding: 10px;
 border-radius: 8px;
 color: #fff;
 bottom: 0;
 left: 0;
}

.glyphicon{
  color: #999;
  font-size: 24px;
}

.col-xs-12{
  font-size: 24px;
  margin-top: 20px;

img{
  margin-left: 20px;
}

}
.col-xs-8{
  margin-bottom: 40px;
}
}
}

重新格式化的代码：

<!DOCTYPE html>
<html class="full" lang="en">
<head>

<title>Pizza</title>

<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">



</head>

<body>

<div class="col-xs-12 col-md-6 ng-scope">
<div class="col-xs-12">
<img ng-src="https://garageapi.herokuapp.com/tag_tab_icons/Tools/icon-tool-darkblue-25.png" src="https://garageapi.herokuapp.com/tag_tab_icons/Tools/icon-tool-darkblue-25.png">&nbsp;Tools</div><!-- end ngRepeat: tag in other.tags | limitTo: 1 -->
<div class="col-xs-3"><img src="http://www.carlotfinance.com/assets/img/car_placeholder.jpg" alt="placeholder image"></div>
<div class="col-xs-8">
<h2><a href="#/shops//detail" class="ng-binding">Pizza Place</a>
<div class="glyphicon glyphicon-road"></div>
<div class="glyphicon glyphicon-unchecked"></div>
</h2>
<p>1234 M Ave, Austin, TX 27000</p>
<p>(555) 400 2800</p>
</div>
<button type="button"  class="btn col-xs-12 makeAppointmentBtn ng-scope">Make Appointment</button>
</div>
<div class="col-xs-12 col-md-6 ng-scope">
<div class="col-xs-12">
<img ng-src="https://garageapi.herokuapp.com/tag_tab_icons/Tools/icon-tool-darkblue-25.png" src="https://garageapi.herokuapp.com/tag_tab_icons/Tools/icon-tool-darkblue-25.png">&nbsp;Tools</div><!-- end ngRepeat: tag in other.tags | limitTo: 1 -->
<div class="col-xs-3"><img src="http://www.carlotfinance.com/assets/img/car_placeholder.jpg" alt="placeholder image"></div>
<div class="col-xs-8">
<h2><a href="#/shops//detail" class="ng-binding">Pizza Place</a>
<div class="glyphicon glyphicon-road"></div>
<div class="glyphicon glyphicon-unchecked"></div>
</h2>
<p>1234 M Ave, Austin, TX 27000</p>
<p>(555) 400 2800</p>
</div>
<button type="button"  class="btn col-xs-12 makeAppointmentBtn ng-scope">Make Appointment</button>
</div>

</body>
</html>

网格断点不覆盖屏幕宽度

0 个答案: