Question

<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个条目没有正确对齐。第4个确实如此，但是第3个只留下了空白区域并且在它应该进入的行下面跳跃。

我做错了什么？ http://gyazo.com/05f1b0719ac28ba3ac12f8352bbf1f43

Answer 1

您的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>

Answer 2

浮动元素通常无法正确计算其高度。您可以执行以下操作：

每6个cols后你放一个清除浮动并重新计算父div的高度。
每6个cols开始一个新行，因为row之后有一个清晰的浮点数。

此外，我将行放在容器内，而不是相反：

<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>

Answer 3

<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>

Answer 4

Bootstrap网格系统：click here 我认为你得到了答案。

行必须放在.container（固定宽度）或 .container-fluid（全宽），用于正确对齐和填充。
内容应放在列中，只有列可能是行的直接子项。

即

<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>

Answer 5

首先，模式应为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>

Answer 6

<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>

Bootstrap恼人的浮动

6 个答案: