使用引導程序創建網格布局

Question

我想在我的<div class="col-sm-1"></div>有一些行，但我認為在 col-sm- 中有<div class="row">是不正確的- 1.

這是我想要的效果

這是我的代碼：

<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

如果您使用的是 bootstrap 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; }