使用引导程序创建网格布局答案

【问题标题】：Create grid layout with bootstrap使用引导程序创建网格布局
【发布时间】：2020-04-10 11:26:54
【问题描述】：

我想在我的 <div class="col-sm-1"></div> 中包含一些行，但我认为在 col-sm-1 中包含 <div class="row"> 是不正确的。

这就是我想要的效果

这是我的代码：

<div class="container">
    <div class="row">
        <div class="col-sm-5">
            <div>
                <span id="titulo">Mochila Projeto SGI</span>
                <br>
                <div id="detalhes">
                    <a href="#" class="categoria">Unisexo > Mochilas</a>
                    <img src="images/rating.png">
                    <a href="#" class="categoria"> (10) </a>
                    <br>
                    <a href="#" class="categoria">Ver Detalhes</a>
                </div>
                <br>
                <hr>
                <br><br><br><br><br><br><br><br><br><br>
                <!-- TODO add buttons estado -->

                <!-- TODO add button cor -->


                <hr>
                <div style="vertical-align:middle;">
                    <img src="images/bola.png">
                    <span id="stock">Em Stock</span>

                    <span id="preco">49.99€</span>
                    <select id="quantidade">
                        <option value="1" selected="selected">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                    <br>
                    <button type="button" id="botaoComprar" class="btn btn-dark">Adicionar ao carrinho!</button>
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <canvas id="myCanvas"></canvas>
        </div>
        <div class="col-sm-1" style="float: right; border: 1px solid black; margin-left: 90px">

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

【问题讨论】：

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

【解决方案1】：

如果您使用的是 bootstrap 4，它提供了 w-100 类，它将整个宽度作为一行。

【讨论】：

【解决方案2】：

类似：

<div class="col-sm-1 items_col"> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> </div>

CSS

items_col { display:flex; }

【讨论】：