Question

我正在尝试展示＆＃39;测试＆＃39;连续3次，第二排3次，但没有显示水平行中的部分

相反，它向我展示了Verticle col模式中的所有内容......

    <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>bootstrap</title>

<div class="services container">
    <h2>Services</h2>
    <div class="row">
        <section class="col-md-6 col-md-4">
            <img class="icon" src='images/cabbage.png' alt="Icon">
            <h3>Vegitables</h3>
            <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
        </section>
        <section class="col-md-6 col-md-4">
            <img class="icon" src='images/car.png' alt="Icon">
            <h3>Cars</h3>
            <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
        </section>
        <section class="col-md-6 col-md-4">
            <img class="icon" src='images/clothes.png' alt="Icon">
            <h3>clothss</h3>
            <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
        </section>
    </div>
    <div class="row">
        <section class="col-md-6 col-md-4">
            <img class="icon" src='images/motorcycle.png' alt="Icon">
            <h3>Motorcycle</h3>
            <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
        </section>
        <section class="col-md-6 col-md-4">
            <img class="icon" src='images/pet-icon.png' alt="Icon">
            <h3>Pets</h3>
            <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
        </section>
        <section class="col-md-6 col-md-4">
            <img class="icon" src='images/phone.png' alt="Icon">
            <h3>Phone</h3>
            <p>
                    Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
            </p>
        </section>
    </div>
</div>


<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>

//my css code

    .icon{
        max-width: 150px;
        margin: 0 auto;
        display: block;
    }
    .service section{
        text-align: center;
    }

这段代码如何运作？是否有一些更正或建议？

Answer 1

引导网格系统需要它们的css样式。

尝试在<head>标记中添加以下内容：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

您的代码似乎很好，之后应该可以使用。

Answer 2

您的代码似乎是正确的，您只需要处理多个屏幕分辨率，我添加了col-xs-4下面的片段，这使我能够在较小的屏幕上渲染我的网格系统，checkout bootstrap的网格系统的选项{{ 3}}应该帮助你

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <div class="container">//main container
            <h2>Services</h2>
            <div class="row">//1st row
                <section class="col-xs-4 col-md-4 col-md-6">
                    <h2>Test</h2>
                </section>
                <section class="col-xs-4 col-md-4 col-md-6">
                    <h2>Test</h2>
                </section>
                <section class="col-xs-4 col-md-4 col-md-6">
                    <h2>Test</h2>
                </section>
            </div>
            <div class="row">//2nd row
                <section class="col-md-4">
                    <h2>Test</h2>
                </section>
                <section class="col-md-4">
                    <h2>Test</h2>
                </section>
                <section class="col-md-4">
                    <h2>Test</h2>
                </section>
            </div>
        </div>

bootstrap中的行和列3

2 个答案: