Bootstrap ряд

-2

У меня есть следующий HTML:Bootstrap ряд

<!DOCTYPE HTML> 
<html> 

<head> 
    <link rel="stylesheet" href="STYLE.css"> 
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
</head> 

<body> 
    <header class="row"></header> 

    <section class="row section1"></section> 
    <section class="row section2"></section> 
    <section class="row section1"></section> 
    <section class="row section2"></section> 
    <section class="row section1"></section> 

    <footer class="row"></footer> 
</body> 

</html>

По какой-то причине все веб-страницы шире, чем окно браузера. Когда я удаляю класс row, все возвращается к норме. Локальный файл CSS не имеет ничего общего с этой проблемой. Я предполагаю, что bootstrap CSS модифицирует строку таким образом, что по какой-то причине она становится более широкой. Поэтому я хотел спросить, есть ли у кого-нибудь идеи, что бы это исправить.

источник

2015-10-20 Adrian Devder

Вы используете строки без упаковки контейнеров вокруг них. http://getbootstrap.com/css/#overview-container –

Вы можете использовать класс контейнера или жидкость-контейнер. .контейнер поддерживает некоторое пространство на краю от фактического экрана и не растягивает просмотр страницы. С другой стороны. Жидкость-контейнер растягивает страницу, насколько это возможно. Смотрите ваш HTML Измененный скрипт ниже:

<!DOCTYPE HTML> 
<html> 

<head> 
    <link rel="stylesheet" href="STYLE.css"> 
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
</head> 

<body> 
<div class="container"> 
    <header class="row"></header> 
    <section class="row section1"></section> 
    <section class="row section2"></section> 
    <section class="row section1"></section> 
    <section class="row section2"></section> 
    <section class="row section1"></section> 

    <footer class="row"></footer> 
</div> 
</body> 

</html>

Кроме того, вы должны использовать .col-MD-6, как класс, чтобы указать ширину вашего раздела в строке, где мкр сменно Л.Г. и см, а также.

md предназначенный для Средние устройства как ноутбук, рабочий стол и т. Д.

lg означает размеров устройств Больших как проектор или несколько больших экранов и т.д.

sm стенды для размеров устройств малых как мобильные телефоны и т.д.

Вы можете использовать комбинацию этих три , Например,

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6 col-sm-1 col-lg-12"> 

     </div> 
    </div> 
</div>

Надеюсь, что это поможет вам приступить к работе и решить вашу проблему.

источник

2015-10-20 10:27:24

Возможно, вам нужно добавить сетку bootstrap css?

Посмотрите на этот пример

http://getbootstrap.com/examples/grid/

источник

2015-10-20 10:06:06

Чтобы устранить эту проблему, вы должны использовать класс row правильно.

Вы не упаковали класс row классом container.

Bootstrap предоставляет grid system.

Система сетки Bootstrap позволяет до 12 столбцов на странице. Вам нужно упорядочить ширину страницы в 12 столбцах.

Невозможно объяснить все здесь. Пожалуйста, ознакомьтесь со следующими ссылками.

Bootstrap grid template

Bootstrap grids

источник

2015-10-20 10:07:13 WisdmLabs

Вы должны использовать контейнеры, чтобы использовать любой из начальной загрузки функциональности. Это может быть контейнер с установленной шириной или контейнер для жидкости, но добавление одного исправляет ваши проблемы. Я также переключаю ваш стиль на использование рабочей версии CDN и переместил Javascript в рекомендуемое место. Вы могли бы найти это лучшей отправной точкой.

Ссылка: http://getbootstrap.com/css/#overview-container и http://getbootstrap.com/css/#grid

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Bootstrap Case</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
</head> 
<body> 
    <div class="container-fluid"> 
     <header class="row">Test 1</header> 

     <section class="row section1">Test 2</section> 
     <section class="row section2">Test 3</section> 
     <section class="row section1">Test 4</section> 
     <section class="row section2">Test 5</section> 
     <section class="row section1">Test 6</section> 

     <footer class="row">Test 7</footer> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body> 
</html>

источник

2015-10-20 10:09:47

Пожалуйста, заверните его в самозагрузки класса .container, а затем проверить, если проблема все еще сохраняется.

<body> 
<div class="container"> 
    //your content goes here 
</div> 
</body>

источник

2015-10-20 10:14:44

Bootstrap ряд

ответ

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