引导程序 3 中的行和列答案

【问题标题】：rows and columns in bootstrap 3引导程序 3 中的行和列
【发布时间】：2018-03-09 10:30:46
【问题描述】：

我试图连续显示 3 次“测试”名称，并在第二行显示 3 次，但它没有显示水平行中的部分

相反，它以垂直 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;
    }

这段代码将如何工作？有什么更正或建议吗？

【问题讨论】：

标签： html css twitter-bootstrap-3 bootstrap-modal bootstrap-4

【解决方案1】：

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

尝试将以下内容放入您的 <head> 标记中：

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

你的代码看起来不错，之后它应该可以工作了。

【讨论】：

但它需要从在线css，但我想从离线css导入。那我该怎么办？？
如果您对使用内容交付网络不感兴趣（完全可以），您可以通过下载 here 将 Bootstrap 引入本地。之后，只需将您的 href 路径设置为指向引导程序的 css 所在的位置。如果您正在寻找更高级的选项，您还可以使用 NPM 导入它，这将提供更好的开发体验。不过就目前而言，我认为您只需在本地下载引导程序就可以了。
请注意，上面的链接适用于 Bootstrap 4。如果您正在寻找上面代码中使用的 Bootstrap 3，请单击 here。

【解决方案2】：

您的代码似乎正确，您只需要处理多个屏幕分辨率，下面的 sn-p 我添加了 col-xs-4 这使我能够在较小的屏幕上呈现我的网格系统，检查引导程序的网格系统选项 @987654321 @应该可以帮助你

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

【讨论】：

@AkshayDeshpande 但run code snippet 工作正常吗？因为我只是在本地做的，它正在工作
酷，您只需标记为答案@AkshayDeshpande 谢谢