Использование Twitter Bootstrap для адаптации веб-сайта и контента к мобильным устройствам
Я создаю веб-сайт (www.jocogolocal.com), и одна из целей — использовать загрузку Twitter, чтобы все содержимое сайта уместилось на экране и было удалено как можно больше пустого пространства, но я чувствую, что застрял, потому что несмотря на мои усилия, он не форматирует так, как мне бы хотелось, а иногда даже ломал сайт из-за того, насколько плохим / большим становится контент / баннер с изображением. ниже приведен код как главной страницы, так и страницы с содержимым, View Vendor, любая помощь будет высоко оценена.
Главная страница
<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>
Ответы 1
На этот вопрос нет полного ответа, кроме как указать вам правильное направление, чтобы помочь себе.
Таблицы следует использовать для отображения табличных данных. Их не следует использовать для полного макета сайта, что вы, по сути, и делаете. Одним из основных преимуществ начальной загрузки CSS является то, что он уже содержит гибкие строительные блоки, которые вы можете использовать. Я так понимаю, это школьный проект? Испытайте себя, чтобы построить макет без табличной структуры, используя div и классы начальной загрузки (контейнеры, строки, столбцы). С текущим сайтом похоже, что вам не хватает точки начальной загрузки.
Если вы пытаетесь устранить пустое пространство, прекратите укладывать контейнеры внутри контейнеров внутри контейнеров. Каждый из этих элементов имеет свои собственные значения отступов и полей, поэтому каждый раз, когда вы это делаете, вы еще больше боретесь с собой.
Например, ваша первая таблица полна ненужных элементов, которые мешают тому, что вы пытаетесь сделать.
Ты:
<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>
Освободитесь от табличного мышления, иначе вы всегда будете бороться с самим собой, имея дело с гибкими требованиями к макету.
Спасибо за точку в правильном направлении. Да, изначально это был школьный проект, но теперь я добавляю последние штрихи для своего клиента. Я замечаю, что многие вещи я мог бы сделать намного лучше, и это действительно скорее опыт обучения, чем что-либо еще. Проблема в том, что я на самом деле не понимал загрузку, и люди, которых я спрашивал, используют загрузку для некоторых второстепенных элементов в своих форматах таблиц, поэтому вы видите, что я сделал в посте, но теперь я понимаю это намного лучше. Спасибо за информацию.