Создание сайта с помощью Twitter Bootstrap

Я работаю над веб-сайтом в течение некоторого времени и имею большую часть сайта, построенного на twitter bootstrap. Сайт отлично подходит для браузеров размером более 900 пикселей, но меньше, чем столбцы начинают перекрываться и выглядят довольно плохо. Мне интересно, есть ли какие-либо советы о том, что делать, чтобы предотвратить такое перекрытие, такое как CSS-параметры и некоторая работа HTML. Это происходит во многих областях, но вот пример. Я знаю, что у этого есть некоторые проблемы, потому что я установил ширину шире столбца, но это так, как выглядит лучше.Создание сайта с помощью Twitter Bootstrap

<div class="row"> 
     <span class="span8"> 
      <h2>Some Title!</h2> 
      <ul> 
       <li>stuff here</li> 
       <li>I have some stuff here</li> 
      </ul> 
      <div class="alert alert-warning center-it"> 
       You can share if you <a href="/login">login or register</a> 
      </div> 
      <br> 
     </span> 

     <form method="get"> 
      <span class="span4"> 
       <input type="search" placeholder="Search for the location" style="width:300px; height: 30px;" class="pull-right" name="location" size="55" /><br><br><br> 
       <span class="pull-right"> 
        <h4>Within: 
         <select name="radius"> 
          <option value="25">25 miles</option> 
          <option value="50">50 miles</option> 
          <option value="100" selected>100 miles</option> 
          <option value="200">200 miles</option> 
          <option value="400">400 miles</option> 
         </select> 
        </h4> 
        </span> 
        <br><br><br> 
        <input class="btn pull-right" type="submit"> 
      </span> 
     </form> 
    </div>

источник

2012-11-01 clifgray

ли вы включать в себя адаптивный CSS и добавил мета видовых тег? – RRikesh

yes У меня есть, см. Комментарий на ответ Риши – clifgray

Я столкнулся с той же проблемой. Как вы можете прочитать в комментарии к Bootstrap's Live Grid Example: «Ниже видовых экранов 767px столбцы становятся текучими и стек вертикально». Я боюсь, что вас не так много (мы) можем сделать.

Впервые я был также очень впечатлен. Если я создаю сетку с левыми (и/или) правыми боковыми панелями, я хочу, чтобы левая и правая боковые панели были слева и справа, а не уложены в верхнюю и нижнюю части главного столбца. Но, переосмыслив идею, я согласился на компромисс, что именно так работает сетчатая сетчатая система в Bootstrap. Многие вещи, которые Bootstrap является лучшими, или одна из лучших фреймворков для гибкого дизайна, поэтому я думаю, что мы должны принимать, как это работает, а не пытаться сделать колесо больше квадрата, не так ли?

Единственный вариант, который я вижу для вас, - это отказаться от макета на основе столбцов. Или согласитесь, что при его использовании ваши столбцы будут перекрываться и складываться вертикально в небольших видовых экранах.

Если вы разрабатываете мобильное приложение, есть какое-то решение, которое может заставить ваше приложение работать только в ландшафтном режиме и иметь боковые панели там, где вы их проектировали. Но, когда вы имеете дело с мобильным сайтом, я не вижу гораздо большего, что вы можете сделать.

источник

2013-02-15 09:14:06 trejder

Это не компромисс, это по дизайну. На мобильных телефонах сетка с левыми и правыми колонками не очень удобна, поэтому бутстрап накладывает их друг на друга. Это имеет для меня большой смысл. – reinder

Как я писал в своем ответе, _now_ это также имеет смысл для меня! :] – trejder

загрузить bootstrap.css и самозагрузку-responsive.css, поставить их под самозагрузкой каталога и попробовать этот код:

<!DOCTYPE html> 
    <html lang="en"><head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="bootstrap/bootstrap.css" rel="stylesheet"> 
    <link href="bootstrap/bootstrap-responsive.css" rel="stylesheet"> 
    </head> 

     <body> 
     <div class="row"> 
      <span class="span8"> 
       <h2>Some Title!</h2> 
       <ul> 
        <li>stuff here</li> 
        <li>I have some stuff here</li> 
       </ul> 
       <div class="alert alert-warning center-it"> 
        You can share if you <a href="/login">login or register</a> 
       </div> 
       <br> 
      </span> 

      <form method="get"> 
       <span class="span4"> 
        <input type="search" placeholder="Search for the location" style="width:300px; height: 30px;" class="pull-right" name="location" size="55" /><br><br><br> 
        <span class="pull-right"> 
         <h4>Within: 
          <select name="radius"> 
           <option value="25">25 miles</option> 
           <option value="50">50 miles</option> 
           <option value="100" selected>100 miles</option> 
           <option value="200">200 miles</option> 
           <option value="400">400 miles</option> 
          </select> 
         </h4> 
         </span> 
         <br><br><br> 
         <input class="btn pull-right" type="submit"> 
       </span> 
      </form> 
     </div> 

    </body></html>

источник

2012-11-01 09:01:24

Извините, я полагаю, что я был недостаточно ясен. У меня есть все это там, и он реагирует, но когда он изменяет размер для меньшего браузера, такие вещи, как текстовые входы, выпадающие списки и другие элементы HTML с фиксированной шириной, перекрываются и объединяются вместе. есть ли какое-либо решение для этого, кроме пересмотра всего макета? – clifgray

afaik responsiveness - НЕ фиксированная ширина HTML-элементов. Вам нужно пересмотреть свой макет, чтобы сделать его отзывчивым. –

Если вы правильно понимаете, ваш входной элемент и другие разделители перекрываются. Если это проблема, с которой вы сталкиваетесь, установите значения класса span * для входных элементов и div. Также элемент span не должен использоваться в качестве контейнера для другого HTML.

Этот быстрый проход в это выглядит лучше меня:

<!DOCTYPE html> 
<html lang="en"><head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<link href="resources/css/bootstrap.css" rel="stylesheet"/> 
</head> 

    <body> 
    <div class="row"> 
     <div class="span8"> 
      <h2>Some Title!</h2> 
      <ul> 
       <li>stuff here</li> 
       <li>I have some stuff here</li> 
      </ul> 
      <div class="alert alert-warning center-it span6"> 
       You can share if you <a href="/login">login or register</a> 
      </div> 
      <br/> 
     </div> 

     <form method="get"> 
      <div class="span4"> 
       <input type="search" placeholder="Search for the location" class="pull-right span4" name="location" size="55" /> 
       <br/><br/><br/> 
       <div class="pull-right"> 
        <h4>Within: 
         <select name="radius"> 
          <option value="25">25 miles</option> 
          <option value="50">50 miles</option> 
          <option value="100" selected="selected">100 miles</option> 
          <option value="200">200 miles</option> 
          <option value="400">400 miles</option> 
         </select> 
        </h4> 
       </div> 
       <br/><br/><br/> 
       <input class="btn pull-right" type="submit"/> 
      </div> 
     </form> 
    </div> 

</body></html>

источник

2013-05-15 18:15:50 peater

Создание сайта с помощью Twitter Bootstrap

ответ

Смежные вопросы