Question

我正在建立一个网站（www.jocogolocal.com），目的之一是使用Twitter自举使该网站的所有内容适合屏幕并消除尽可能多的空白，但是我觉得之所以陷入困境，是因为尽管我付出了很大的努力，但它并没有按照我想要的方式进行格式化，有时它甚至会使网站的内容/图像横幅变得多么糟糕/太大。以下是母版页和包含内容“查看供应商”的页面的代码，我们将不胜感激。

母版页

    <asp:Table runat="server">
        <asp:TableRow>
            <asp:TableCell>  
                <div class="container">
                    <div class="row">
                    <div class="jumbotron">
                        <div class="container">
                <asp:Image runat="server" ImageAlign="Middle" ImageUrl="~/Images/JoCoGoBanner.png" class="img-responsive col-lg-12 col-md-12 col-sm-12 "/>
                </div>
                    </div>
                    </div>
                    </div>
            </asp:TableCell>
            </asp:TableRow>
            </asp:Table>
    <br />

查看供应商

    <ItemTemplate>
            <tr>
            <td>
            <div class="container">
                <div class="row">
                  <div class="col-sm-3 col-xs-12">
                <p><asp:Label runat="server" ID="lblName" Enabled="false" Font-Bold="true" Font-Size="X-Large" Text='<%# Bind("Name") %>'/></p>
                </div>
                </div>
            </td>
            </tr>

Answer 1

除了为您指出正确的方向来帮助自己之外，没有其他完整答案。

表应用于显示表格数据。它们不应该用于您实际上正在做的完整网站布局。引导CSS的主要卖点之一是，它已经充实了灵活的构建基块供您使用。我假设这是一个学校项目？挑战自己使用div和bootsrap类（容器，行，列）构建没有表格结构的布局。在当前站点上，您似乎错过了全部引导的重点。

如果要消除空白，请停止将容器堆叠在容器内部。这些元素中的每一个都有各自的填充和边距值，因此每次执行此操作时，您都在与自己作斗争。

例如，您的第一个表中充满了不必要的元素，这些元素正在与您要尝试做的事情作斗争。

您：

<table>
<tbody><tr>
    <td>
                <div class="container">
                    <div class="row">
                    <div class="jumbotron">
                        <div class="container">
                <img class="img-responsive col-lg-12 col-md-12 col-sm-12 col-xs-20" src="Images/JoCoGoBanner.png">
                </div>
                    </div>
                    </div>
                    </div>
            </td>
</tr>
</tbody></table>

使用引导程序以灵活的布局清洁div：

<div class="jumbotron p-0"><img class="img-responsive col-lg-12 p-0" src="Images/JoCoGoBanner.png"></div>

摆脱表格布局思维的束缚，否则您将始终无法应对灵活的布局要求。

使用Twitter Bootstrap使网站和内容移动友好

母版页

查看供应商

1 个答案: