Как увеличить расстояние между вкладками navstost navstore?

-2

Я бы хотел, чтобы мои пять загрузочных вкладок были равномерно распределены по контейнерам. В настоящее время они находятся посередине, но на левой и правой сторонах вкладок имеется столько свободного места.Как увеличить расстояние между вкладками navstost navstore?

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

Вот мой bootply: http://www.bootply.com/EJO7TvV3B3

Вот мой HTML:

<div class="content-section-c"> 

    <div class="container"> 

     <div class="row"> 
      <div class="col-lg-12"> 
       <h2>Sample Search Results</h2> 
      </div> 
     <div class="tabbable"> 
      <ul class="nav nav-tabs"> 
      <li class="active"><a href="#pane1" data-toggle="tab">APPLE<br> 
       TREES 
           </a></li> 
      <li><a href="#pane2" data-toggle="tab">ORANGE<br>TREES</a></li> 
      <li><a href="#pane3" data-toggle="tab">PEARS <br> TREES</a></li> 
      <li><a href="#pane4" data-toggle="tab">BANANAS<br>&nbsp;</a></li> 
      <li><a href="#pane4" data-toggle="tab">GRAPE<br> TREES</a></li> 
          </ul> 
      <div class="tab-content"> 
      <div id="pane1" class="tab-pane active"> 
       <p class="results">126 Results Founds</p> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
                </div> 
      <div id="pane2" class="tab-pane"> 
      <p class="results">75 Results Founds</p> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/05_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/06_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/07_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/08_card.png"></div> 
      </div> 
      <div id="pane3" class="tab-pane"> 
       <p class="results">144 Results Founds</p> 
           <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/09_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/10_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/11_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/12_card.png"></div> 
      </div> 
      <div id="pane4" class="tab-pane"> 
       <p class="results">170 Results Founds</p> 
           <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
      </div> 
      <div id="pane5" class="tab-pane"> 
       <p class="results">256 Results Founds</p> 
           <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
      </div> 
      </div><!-- /.tab-content --> 
     </div><!-- /.tabbable --> 
     </div> 

    </div> 
    <!-- /.container --> 
</div> 
<!-- /.content-section-c -->

Вот мой CSS:

.content-section-c { 
    padding: 50px 0; 
    background-color: #d4d4d4; 
} 

h2 { 
    font-family: 'Lato', sans-serif; 
    font-weight: 700; 
    color: #3C5A78; 
    line-height: 1; 
    text-align:center; 
    padding: 0 0 16px 0; 
} 

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{ 
border-top: none; 
border-left: none; 
border-right: none; 
border-bottom: 3px solid #e9a39c; 
font-weight: bold; 
background-color: #d4d4d4 !important; 
} 

.nav-tabs>li>a:hover{ 
    border: 1px solid transparent; 
} 

.nav>li>a:focus, .nav>li>a:hover{ 
    background-color: #d4d4d4; 
} 

.nav-tabs{ 
    border-bottom: none; 
    display: inline-block; /* needed to center the list items */ 
} 

.tabbable{ 
    text-align: center; 
} 

.results { 
    font-family: 'Merriweather', serif; 
    font-weight: 300; 
    color: #355A78; 
    font-size: 16px; 
    margin: 20px 0 5px 0; 
    text-align: left; 
}

источник

2016-04-14 user3075987

Если т не так, вы спросил тот же пример вчера, прося, чтобы удалить границы и дает цвет, не так ли? –

Да, это правильно. Это сложная вкладка бутстрапа, которая не очень хорошо работает для меня. – user3075987

ok, послушайте, чтобы сделать его более широким, используйте 100% на ul, а затем дайте 20% каждой вкладке, так как у вас есть пять. Это работает так. –

-1

я это исправить. Надеюсь, ты так хочешь.

/* CSS used here will be applied after bootstrap.css */ 
 

 
.content-section-c { 
 
    padding: 50px 0; 
 
    background-color: #d4d4d4; 
 
} 
 

 
h2 { 
 
\t font-family: 'Lato', sans-serif; 
 
    font-weight: 700; 
 
    color: #3C5A78; 
 
    line-height: 1; 
 
    text-align:center; 
 
    padding: 0 0 16px 0; 
 
} 
 

 
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{ 
 
border-top: none; 
 
border-left: none; 
 
border-right: none; 
 
border-bottom: 3px solid #e9a39c; 
 
font-weight: bold; 
 
background-color: #d4d4d4 !important; 
 
} 
 

 
.nav-tabs>li>a:hover{ 
 
    border: 1px solid transparent; 
 
} 
 

 
.nav>li>a:focus, .nav>li>a:hover{ 
 
\t background-color: #d4d4d4; 
 
} 
 

 
.nav-tabs{ 
 
    border-bottom: none; 
 
    display: inline-block; /* needed to center the list items */ 
 
} 
 

 
.tabbable{ 
 
    text-align: center; 
 
} 
 

 
.results { 
 
    font-family: 'Merriweather', serif; 
 
    font-weight: 300; 
 
    color: #355A78; 
 
    font-size: 16px; 
 
    margin: 20px 0 5px 0; 
 
    text-align: left; 
 
} 
 
ul.nav{ 
 
    width:100%; 
 
} 
 
.nav-tabs>li { 
 
    width: 20%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
    <div class="content-section-c"> 
 

 
     <div class="container"> 
 

 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 
        <h2>Sample Search Results</h2> 
 
       </div> 
 
      <div class="tabbable"> 
 
       <ul class="nav nav-tabs"> 
 
       <li class="active"><a href="#pane1" data-toggle="tab">APPLE<br> 
 
        TREES 
 
            </a></li> 
 
       <li><a href="#pane2" data-toggle="tab">ORANGE<br>TREES</a></li> 
 
       <li><a href="#pane3" data-toggle="tab">PEARS <br> TREES</a></li> 
 
       <li><a href="#pane4" data-toggle="tab">BANANAS<br>&nbsp;</a></li> 
 
       <li><a href="#pane4" data-toggle="tab">GRAPE<br> TREES</a></li> 
 
           </ul> 
 
       <div class="tab-content"> 
 
       <div id="pane1" class="tab-pane active"> 
 
        <p class="results">126 Results Founds</p> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
 
                 </div> 
 
       <div id="pane2" class="tab-pane"> 
 
       <p class="results">75 Results Founds</p> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/05_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/06_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/07_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/08_card.png"></div> 
 
       </div> 
 
       <div id="pane3" class="tab-pane"> 
 
        <p class="results">144 Results Founds</p> 
 
            <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/09_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/10_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/11_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/12_card.png"></div> 
 
       </div> 
 
       <div id="pane4" class="tab-pane"> 
 
        <p class="results">170 Results Founds</p> 
 
            <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
 
       </div> 
 
       <div id="pane5" class="tab-pane"> 
 
        <p class="results">256 Results Founds</p> 
 
            <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div> 
 
       <div class="col-md-6 col-xs-12"> 
 
        <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
 
       </div> 
 
       </div><!-- /.tab-content --> 
 
      </div><!-- /.tabbable --> 
 
      </div> 
 

 
     </div> 
 
     <!-- /.container --> 
 
    </div> 
 
    <!-- /.content-section-c -->

источник

2016-04-14 06:05:00

Хорошо, это не будет небольшой ответ, но это может помочь вам на вашем пути понимания того, где вы находитесь проблемы.

Прежде всего я вижу некоторое злоупотребление кода Bootstrap и оберток:

У вас есть один контейнер <div class="container"> на второй линии, которая заворачивает все вы будете код. Это работает, но на самом деле это не цель container для обертывания всего вашего кода. У вас уже есть обертка <div class="content-section-c">, так зачем использовать вторую, или в вашем примере даже третий, <div class="tabbable">?
При использовании <div class="container"> вы будете ограничены шириной контейнера и максимальным значением 1170px. Вот почему у вас столько маржи слева и справа от навигации. У Bootstrap есть контейнер-жидкость класса <div class="container-fluid">, которая занимает полную ширину экрана. Так вы пример я хотел бы использовать этот класс для навигации раздела

Закрепление вы код с моими комментариями выше вы могли бы изменить навигацию к этому:

<div class="content-section-c"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <h2>Sample Search Results</h2> 
     <ul class="nav nav-tabs"> 
      <li class="active"> 
      <a href="#pane1" data-toggle="tab">APPLE<br>TREES</a> 
      </li> 
      <li> 
      <a href="#pane2" data-toggle="tab">ORANGE<br>TREES</a> 
      </li> 
      <li> 
      <a href="#pane3" data-toggle="tab">PEARS <br> TREES</a> 
      </li> 
      <li> 
      <a href="#pane4" data-toggle="tab">BANANAS<br>&nbsp;</a> 
      </li> 
      <li> 
      <a href="#pane4" data-toggle="tab">GRAPE<br> TREES</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div>

Теперь панель навигации вытягивается в левую сторону, то есть нормальное поведение, потому что вы не устанавливали с к ul и li поэтому изменение CSS ставка будет исправить, что

.content-section-c { 
    padding: 50px 0; 
    background-color: #d4d4d4; 
    text-align: center; 
} 

.content-section-c ul { 
    width: 100% 
} 

.content-section-c ul li { 
    margin: 3%; 
    width: 14%; 

}

Чтобы подробно объяснить выше css, в первую очередь у вас был класс .tabbable {text-align: center;}, но мы удалили эту оболочку (потому что у вас уже есть ее). Теперь вы должны добавить этот стиль text-align:center к обертке, которую мы сохранили content-section-c.

Дайте ul ширину 100%, чтобы она занимала всю ширину.

Вы можете указать li ширину 20%, так как вы используете подчеркивание активных элементов списка, линия под ней фактически займет 20%, и это не очень приятно. Поэтому я сделал некоторые трюки css и добавил некоторые маржи в элементы списка.

Внимания вам нужно будет использовать некоторые @media запросы снимут маржу на небольших экранах

Это было на самом деле вопрос, который вы были не так ли? Тем не менее, чтобы дать вам некоторые дополнительные советы и информацию я могу сказать вам следующее:

бутстраповской container фактически контейнер row элементов и бутстрапе row фактически контейнер колонн col-*-*

Источник: when-should-i-use-class-container-and-row

Итак, если вы посмотрите на остальную часть кода, вы можете сделать что-то подобное. Поместите каждую (колонку) группу внутри строки.

<div class="tab-content"> 
    <div class="container"> 
     <div class="row"> 
     <div id="pane1" class="tab-pane active"> 
      <p class="results">126 Results Founds</p> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"> 
      </div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"> 
      </div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"> 
      </div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"> 
      </div> 
     </div> 
     </div>

И вот у вас есть ботинки с вами, предыдущий код очищен, удачи!

Bootply

источник

2016-04-14 07:55:19 Peter

Как увеличить расстояние между вкладками navstost navstore?

ответ

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