Question

我有一个我希望做出回应的结果列表。我将这些结果大致显示在页面的中心，左边和右边的边框是空格。我希望这个空格随着浏览器的大小调整而消失。

我正在使用以下css：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">


#parent{ position: relative; width: 900px; left: 400px; background: #999;padding:10px;}

.child { position: relative; background:#ccc;min-height:250px;margin:20px;}

这是html：

    <div id="parent" infinite-scroll="addMoreItems()" infinite-scroll-distance="1" infinite-scroll-disabled='busy'>
        <div class="child" ng-repeat="blah in blahs">
                Description: <br />{{Description}} <br /><br />
                StarRating: <br /> {{Rating}} <br /><br />

            <div ng-controller="weatherCtrl" ng-init="isCollapsed = !isCollapsed">
                <div>
                  <button ng-model="blah" class="btn btn-default" ng-click="loadWeather(blah, $index);">{{buttonText}} weather</button>
                  <hr>
                  <div collapse="isCollapsed">
                    <div class="well well-lg">Some content</div> 
                  </div>
                </div>  
            </div>

          <div style='clear: both;'></div>
        </div>
      <div ng-show='busy'><h1>Loading data...</h1></div>
    </div>

Answer 1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">


#parent{ position: relative; width: 900px; left: 400px; background: #999;padding:10px;}

.child { position: relative; background:#ccc;min-height:250px;margin:20px;}

@media (max-width: 400px) {
  .child{margin:0px;}
  #parent{width:100%;}
}

那应该是你想要使用的CSS

如何使我的搜索结果列表响应？

1 个答案: