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

Question

我想在<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>

Answer 1

如果您正在使用引导程序4，它将提供类w-100，该类将完整宽度作为一行。

Answer 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; }