Бутстрап, раздражающий поплавок

70
7

<body>
<div class="wrap-site">
<!--Header-->
<header>
<div class="inner">
<a id="logo" href="/levgronare" title="City Gross startsida">
<img id="big" src="images/citygross_logo_2013.png" alt="City Gross - Där maten gör skillnad">
<img id="small" src="images/cg_smalllogo.png" alt="City Gross - Där maten gör skillnad">
</a>
<a href="http://www.citygross.se/" class="back-button-link">Till citygross.se »</a>
</div>
</header>
<div class="row">
<div class="container">
<div class="col-sm-6">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Taurus.png"/>
</div>
<h2>Rök- och grilltunna</h2>
<p> Landmann Taurus smoker kan användas som en vanlig grill för direkt och indirekt grillning, men man kan även tillämpa äkta barbeque tack vare sidobehållaren på grillen.Det gör att temperaturen inne i den stora behållaren blir låg. Skorstenen skapar ett luftdrag som för rök och värme igenom den stora behållaren. Grillyta 66x36cm. Strl. 140x120x53 cm. Ord. pris 2299:-/st. <span class="price">SPARA 300:-</span> </p>
</div>
</div>
<div class="col-sm-6">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Dorado.png"/>
</div>
<h2>Grillvagn</h2>
<p> Landmann Dorado, Strl. 134x114x63 cm, grillyta: 57x42 cm. Dorado kolgrill är en funktionsrik grill med många smarta funktioner. Man kan enkelt höja och sänka glödbädden med en vev och styr därmed enkelt värmen.</p>
</div>
</div>
<div class="col-sm-6">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Klotgrill.png"/>
</div>
<h2>Klotgrill</h2>
<p> Landmann 47 cm. Klotgrill med emaljerat lock och grillskål. Grillgaller med en grillyta på Ø44 cm. Kolavskiljare för indirekt grillning. Askhylla undertill som lätt kan tas loss och tömmas.</p>
</div>
</div>
<div class="col-sm-6">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Klotgrill.png"/>
</div>
<h2>Klotgrill</h2>
<p> Landmann 47 cm. Klotgrill med emaljerat lock och grillskål. Grillgaller med en grillyta på Ø44 cm. Kolavskiljare för indirekt grillning. Askhylla undertill som lätt kan tas loss och tömmas.</p>
</div>
</div>
</div>
</div>
</div>
</body>

Моя строка обертывает все столбцы, так ли это?

Моя проблема заключается в том, что 3-я позиция не выравнивается правильно. Четвертый делает, но третий просто оставляет пустое пространство и прыгает вниз под строкой, в которой он должен находиться.

Что я делаю не так? http://gyazo.com/05f1b0719ac28ba3ac12f8352bbf1f43

спросил(а) 2015-04-16T10:02:00+03:00 5 лет, 6 месяцев назад
1
Решение
58

Ваш col-sm- должен быть row.

Вы должны использовать вот так:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta charset="UTF-8">
<title>Welcome to jobworxx</title>
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="css/media.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:300italic' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="js/custom.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>
<body>
<body>
<div class="wrap-site">
<!--Header-->
<header>
<div class="inner">
<a id="logo" href="/levgronare" title="City Gross startsida">
<img id="big" src="images/citygross_logo_2013.png" alt="City Gross - Där maten gör skillnad">
<img id="small" src="images/cg_smalllogo.png" alt="City Gross - Där maten gör skillnad">
</a>
<a href="http://www.citygross.se/" class="back-button-link">Till citygross.se »</a>
</div>
</header>

<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Taurus.png"/>
</div>
<h2>Rök- och grilltunna</h2>
<p> Landmann Taurus smoker kan användas som en vanlig grill för direkt och indirekt grillning, men man kan även tillämpa äkta barbeque tack vare sidobehållaren på grillen.Det gör att temperaturen inne i den stora behållaren blir låg. Skorstenen skapar ett luftdrag som för rök och värme igenom den stora behållaren. Grillyta 66x36cm. Strl. 140x120x53 cm. Ord. pris 2299:-/st. <span class="price">SPARA 300:-</span> </p>
</div>
</div>
<div class="col-sm-6">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Dorado.png"/>
</div>
<h2>Grillvagn</h2>
<p> Landmann Dorado, Strl. 134x114x63 cm, grillyta: 57x42 cm. Dorado kolgrill är en funktionsrik grill med många smarta funktioner. Man kan enkelt höja och sänka glödbädden med en vev och styr därmed enkelt värmen.</p>
</div>
</div>
</div>
<div class="row">

<div class="col-sm-6">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Klotgrill.png"/>
</div>
<h2>Klotgrill</h2>
<p> Landmann 47 cm. Klotgrill med emaljerat lock och grillskål. Grillgaller med en grillyta på Ø44 cm. Kolavskiljare för indirekt grillning. Askhylla undertill som lätt kan tas loss och tömmas.</p>
</div>
</div>
<div class="col-sm-6">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Klotgrill.png"/>
</div>
<h2>Klotgrill</h2>
<p> Landmann 47 cm. Klotgrill med emaljerat lock och grillskål. Grillgaller med en grillyta på Ø44 cm. Kolavskiljare för indirekt grillning. Askhylla undertill som lätt kan tas loss och tömmas.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
</html>

ответил(а) 2015-04-16T10:07:00+03:00 5 лет, 6 месяцев назад
42

<body>
<div class="wrap-site">
<!--Header-->
<header>
<div class="inner">
<a id="logo" href="/levgronare" title="City Gross startsida">
<img id="big" src="images/citygross_logo_2013.png" alt="City Gross - Där maten gör skillnad">
<img id="small" src="images/cg_smalllogo.png" alt="City Gross - Där maten gör skillnad">
</a>
<a href="http://www.citygross.se/" class="back-button-link">Till citygross.se »</a>
</div>
</header>
<div class="row">
<div class="container">
<div class="col-sm-6">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Taurus.png"/>
</div>
<h2>Rök- och grilltunna</h2>
<p> Landmann Taurus smoker kan användas som en vanlig grill för direkt och indirekt grillning, men man kan även tillämpa äkta barbeque tack vare sidobehållaren på grillen.Det gör att temperaturen inne i den stora behållaren blir låg. Skorstenen skapar ett luftdrag som för rök och värme igenom den stora behållaren. Grillyta 66x36cm. Strl. 140x120x53 cm. Ord. pris 2299:-/st. <span class="price">SPARA 300:-</span> </p>
</div>
</div>
<div class="col-sm-6">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Dorado.png"/>
</div>
<h2>Grillvagn</h2>
<p> Landmann Dorado, Strl. 134x114x63 cm, grillyta: 57x42 cm. Dorado kolgrill är en funktionsrik grill med många smarta funktioner. Man kan enkelt höja och sänka glödbädden med en vev och styr därmed enkelt värmen.</p>
</div>
</div>
<div class="col-sm-6">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Klotgrill.png"/>
</div>
<h2>Klotgrill</h2>
<p> Landmann 47 cm. Klotgrill med emaljerat lock och grillskål. Grillgaller med en grillyta på Ø44 cm. Kolavskiljare för indirekt grillning. Askhylla undertill som lätt kan tas loss och tömmas.</p>
</div>
</div>
<div class="col-sm-6">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Klotgrill.png"/>
</div>
<h2>Klotgrill</h2>
<p> Landmann 47 cm. Klotgrill med emaljerat lock och grillskål. Grillgaller med en grillyta på Ø44 cm. Kolavskiljare för indirekt grillning. Askhylla undertill som lätt kan tas loss och tömmas.</p>
</div>
</div>
</div>
</div>
</div>
</body>

ответил(а) 2015-04-16T11:52:00+03:00 5 лет, 6 месяцев назад
42

Во-первых, шаблон должен быть container, row, с col-xx-x. Тогда вы можете представить, что row - это что-то вроде table tr. Вы можете сделать следующее:


<div class="container">
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
</div>
<div class="row">
<div class="col-md-6">3</div>
<div class="col-md-6">4</div>
</div>
</div>

ответил(а) 2015-04-16T10:13:00+03:00 5 лет, 6 месяцев назад
41

Bootstrap Grid System: нажмите здесь, я думаю, у вас есть ответ.

    Строки должны быть размещены внутри контейнера (фиксированной ширины) или жидкости-контейнера (полная ширина) для правильного выравнивания и заполнения. Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк.

т.е.

<div class="container-fluid">
<div class="row">...</div>
</div>

т.е. для структуры строк

<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>

ответил(а) 2015-04-16T10:13:00+03:00 5 лет, 6 месяцев назад
41

<body>
<div class="wrap-site">
<!--Header-->
<header>
<div class="inner">
<a id="logo" href="/levgronare" title="City Gross startsida">
<img id="big" src="images/citygross_logo_2013.png" alt="City Gross - Där maten gör skillnad">
<img id="small" src="images/cg_smalllogo.png" alt="City Gross - Där maten gör skillnad">
</a>
<a href="http://www.citygross.se/" class="back-button-link">Till citygross.se »</a>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Taurus.png"/>
</div>
<h2>Rök- och grilltunna</h2>
<p> Landmann Taurus smoker kan användas som en vanlig grill för direkt och indirekt grillning, men man kan även tillämpa äkta barbeque tack vare sidobehållaren på grillen.Det gör att temperaturen inne i den stora behållaren blir låg. Skorstenen skapar ett luftdrag som för rök och värme igenom den stora behållaren. Grillyta 66x36cm. Strl. 140x120x53 cm. Ord. pris 2299:-/st. <span class="price">SPARA 300:-</span> </p>
</div>
</div>
<div class="col-sm-3">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Dorado.png"/>
</div>
<h2>Grillvagn</h2>
<p> Landmann Dorado, Strl. 134x114x63 cm, grillyta: 57x42 cm. Dorado kolgrill är en funktionsrik grill med många smarta funktioner. Man kan enkelt höja och sänka glödbädden med en vev och styr därmed enkelt värmen.</p>
</div>
</div>
<div class="col-sm-3">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Klotgrill.png"/>
</div>
<h2>Klotgrill</h2>
<p> Landmann 47 cm. Klotgrill med emaljerat lock och grillskål. Grillgaller med en grillyta på Ø44 cm. Kolavskiljare för indirekt grillning. Askhylla undertill som lätt kan tas loss och tömmas.</p>
</div>
</div>
<div class="col-sm-3">
<div class="entry">
<div class="entry-image">
<img src="images/Landmann_Klotgrill.png"/>
</div>
<h2>Klotgrill</h2>
<p> Landmann 47 cm. Klotgrill med emaljerat lock och grillskål. Grillgaller med en grillyta på Ø44 cm. Kolavskiljare för indirekt grillning. Askhylla undertill som lätt kan tas loss och tömmas.</p>
</div>
</div>
</div>
</div>
</div>
</body>

ответил(а) 2015-04-16T10:08:00+03:00 5 лет, 6 месяцев назад
41

Плавающие элементы часто не могут правильно вычислять их высоту. Вы можете сделать следующее:

    После каждых 6 столбцов вы помещаете a, который очищает float и пересчитывает высоту родительского div. Начните новую строку для каждых 6 столбцов, потому что строка имеет четкое значение float на: в любом случае.

Также я бы поставил строку внутри контейнера, а не наоборот:

<div class="container">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
</div>

ответил(а) 2015-04-16T10:07:00+03:00 5 лет, 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема