Question

这可能看起来很容易或很简单，但作为HTML / Bootsrap / CSS的初学者，它对我来说很重要。

我的问题是无论我做什么，我都会在小显示屏上进行水平滚动。最后我想也许我应该缩小小显示器上的字体大小。但我不知道如何为xs尺寸设置不同的风格？

有这张表：

<table class="table table-hover">
    @Html.Partial("_Property/Grid/TableHeader") 
    @Html.Partial("_Property/Grid/SponsoredRows",Model.SearchResult.SponsoredResult)
...
<tr data-link-url="@Url.Action(" ....
</tr>

tr s非常像这样：

<tr class="warning" data-link-url="@Url.Action("Click", "Impression", new {id = listing.SponsoredEntityImpression.ID, guid = listing.SponsoredEntityImpression.GUID, area = AreaNames.Ad})">
        @Html.Partial("_Property/Grid/RowCells", listing.PropertyListingSummary)
    </tr>

这是td s连续：

    <td class="hidden-xs hidden-sm">@Html.Partial("_Property/Grid/RowIcons", Model)</td>
<td class="hidden-xs hidden-sm">@Model.Code</td>
<td class="hidden-xs hidden-sm">@Html.Partial("_Property/Grid/RowPhoto", Model)</td>

<td class="test">@propertyPresentationHelper.BuildRegion(Model)</td>
<td>@propertyPresentationHelper.BuildTitle(Model)</td>
<td>@propertyPresentationHelper.BuildArea(Model)</td>
<td>@propertyPresentationHelper.BuildPriceAndPricePerArea(Model)</td>


<style>
    p {
        color: red;
    }

    .test {
        font-size: 8px;
    }

</style>

Answer 1

您可以使用媒体查询：Bootstrap documentation

@media (max-width: @screen-xs-max) {
   /* Here dimension for xs */
}

如何避免HTML中的表格中的水平滚动？

1 个答案: