Bootstrap - Горизонтальная полоса прокрутки

enter image description here Bootstrap - Горизонтальная полоса прокрутки

мне нужна горизонтальная полоса прокрутки для кода ниже.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link href="bootstrap.min.css" rel="stylesheet" /> 
</head> 
<body> 
    <h1 class="page-header">Horizontal Scroll in bootstrap</h1> 
    <div class="container-fluid" style="overflow-x:scroll;"> 
     <div class="col-sm-3"> 
      <h3>Tree 1</h3> 

     </div> 

     <div class="col-sm-3"> 
      <h3>Tree 2</h3> 

     </div> 
     <div class="col-sm-3"> 
      <h3>Tree 3</h3> 

     </div> 
     <div class="col-sm-3"> 
      <h3>Tree 4</h3> 

     </div> 
     <div class="col-sm-3"> 
      <h3>Tree 5</h3> 

     </div> 
    </div> 
</body> 
</html>

Если выполняется вышеуказанная строка, то результат показан как изображение. Но мне нужно Дерево 5 после Дерева 4. Не ниже Дерева 1. Если я увеличиваю Дерево 6, это показано как Дерево 5., то есть мне нужна горизонтальная полоса прокрутки. Пожалуйста, помогите мне.

источник

2015-07-14 ipln

Это может быть:

style="overflow-x:scroll; white-space: nowrap;"

, а затем в вашем CSS:

.col-sm-3{display: inline-block;}

fiddle

источник

2015-07-14 09:26:37

Я пробовал. Но все та же проблема. – ipln

Я отредактировал свой ответ со скрипкой –

Пожалуйста, дайте ссылку на скрипку – ipln

Новый ответ

Основываясь на первоначальном ответе Alex Коломые, но lil clearer и без i nline.

Добавьте следующий код в пользовательский файл CSS, и он должен сделать трюк:

@media (min-width: 992px) { 
    .container-fluid { 
    overflow-x: scroll; 
    white-space: nowrap; 
    } 
    .col-md-3 { 
    display: inline-block; 
    vertical-align: top; 
    float: none; 
    } 
}

Что это делает и почему это работает?

Элемент .container-fluid предоставляет оболочке свойство прокручивать по горизонтали, если имеется переполненное содержимое, и сообщает ему НЕ обертывать («linebreak») пробел между текстом или в этом случае дочерними элементами.

Часть .col-md-3 «взламывает» в сетку сетки Bootstraps и отключает плавающее влево - это было причиной разрыва линии между вашим четвертым и пятым «деревом». «display: inline-block» отображает ваши элементы в одной строке, а «vertical-align: top» делает это так, как вы, возможно, догадались, выровнены по высоте.

Проблема

Это "взломать" делает бутстраповские сетки довольно бесполезно - по крайней мере, для элементов 3-колонки.

Возможно, вы захотите предоставить вашему контейнеру дополнительный класс или идентификатор, чтобы новый CSS был нацелен только на этот один контейнер.

например:

@media (min-width: 992px) { 
    .container-fluid.my-own-class { 
    overflow-x: scroll; 
    white-space: nowrap; 
    } 
    .container-fluid.my-own-class .col-md-3 { 
    display: inline-block; 
    vertical-align: top; 
    float: none; 
    } 
}

И, наконец, линия в вашем HTML будет выглядеть следующим образом:

<div class="container-fluid my-own-class">

Старый ответ

Основная проблема вы Непонимание точка бутстрап-сетки. Вы пытаетесь обернуть 15 столбцов (5 x col-3) в сетке с 12 столбцами.

Да, вы можете это сделать, но вам нужно работать над базовым принципом Bootstrap, который был бы глупым ...

Дайте нам более точную информацию о том, чего вы хотите достичь, что вы пробовали, демо и т. Д.

источник

2015-07-14 10:04:17 Foaster

Пожалуйста, перейдите по ссылке. http://plnkr.co/edit/1mPjuXy7aOW6fJUav7ea?p=preview. В приведенной выше ссылке Дерево 1 - Дерево 5 отображаются вертикально. Но мне нужно только в горизонтальном представлении ... Пожалуйста, дайте мне идею или какой-нибудь рабочий код для пользователя ... – ipln

Bootstrap - Горизонтальная полоса прокрутки

ответ

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