html - 如何在页面最小化时让按钮井井有条？

Question

我的页面在最小化时出现问题，按钮不是杂乱无章的

<tbody>
    <tr ng-if="PlacesOfInterest.length > 0" role="row" class="text-center" ng-repeat="row in PlacesOfInterest | filter: search  | limitTo: limit as filterPlaces " ng-cloak>
        <td style="vertical-align:middle"><span class="" ng-bind="row.PlaceName"></span></td>
        {{row.PlaceName}}
        <td><img ng-if="row.PlacePhotos.length > 0" src="{{row.PlacePhotos[0].URL}}" alt="No Image" style="height:150px; width:100%"/></td>
        <td>
            <span ng-init="max = 200" ng-bind="row.PlaceDescription.slice(0,max)"></span>
            <a ng-show="row.PlaceDescription.length > 200 && max == 200" ng-click="max = 10000">... <span class="more-less"> more</span></a>
            <a class="more-less" ng-show="max > 200" ng-click="max = 200"> less</a>
        </td>
        <td>
            <div>
                <a class="btn btn-sm btn-modify-places btn-min-width">Edit</a>
                <a class="btn btn-sm btn-default-places btn-min-width">Specialities</a>
                <a class="btn btn-sm btn-delete-places btn-min-width">Delete</a>
            </div>

        </td>
    </tr>
</tbody>

当我的页面最大化时，我希望它和我的页面一样

Answer 1

要以响应方式调整内容，您可以使用 css“@media ( )”，它允许您根据页面大小为页面设置特定的 css 规则，下面的代码例如在大小为 800px 时应用 css或更少

@media (max-width: 800px){
div a { width: 150px; clear:both;}
}

此代码只是一个示例，如果您愿意，请分享您的 css，我将在您自己的代码中显示调整@media 有很多可能性，请在此处查看更多信息 https://www.w3schools.com/cssref/css3_pr_mediaquery.asp