使用Twitter引导程序使网站和内容对移动设备友好

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 的主要卖点之一是它已经充实了灵活的构建块供您使用。我假设这是一个学校项目？挑战自己，使用divs 和 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>

摆脱表格布局思维，否则您将始终与自己在处理灵活的布局要求作斗争。