在Bootstrap中使用网格系统

Question

一般而言，我对Web开发相对较新，并且存在布局危机：我有一个容器流体 ，该容器流体将行分成两个* col-md-6 * s。 在col-md-6中，我希望能够水平放置元素。 如我的代码/图片所示； 我正在尝试制作一个简单的div，其高度为按钮组的高度的95％并显示在按钮组旁边...但是它显示在其下方且非常短（我希望它与按钮一样高组）。 像这样在Bootstrap中彼此相邻的元素大小调整/定位的协议是什么？

    <div class="container-fluid">
<div class="row">

        <div class="col-md-6" style="background-color: lightcyan">
            <div class="btn-group-vertical btn-group-lg">
                <button type="button" class="btn btn-primary">Quick Select</button>
                <button type="button" class="btn btn-primary">Show in Depth</button>
                <button type="button" class="btn btn-primary">Delete Product</button>
            </div>
            <div id="prod_view">
                yo
                </div>

CSS：

    #prod_view{
background: lightcoral;
width: 69%;
height: 95%;
margin-left: 23%;
border: solid;
    }

现在看起来像什么：

我希望“ yo”框更加矩形，并位于按钮组的右侧。

Answer 1

这是将要执行的flex布局。 您可以使用justify-content属性影响水平对齐方式，而align-items将影响垂直对齐方式。 这是flexbox的可视指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 .custom-row { display: flex; justify-content: space-between; } .custom-row > div:last-child { width: 69%; } #prod_view { height: 95%; background: lightcoral; border: solid; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-6 custom-row" style="background-color: lightcyan"> <div class="btn-group-vertical btn-group-lg"> <button type="button" class="btn btn-primary">Quick Select</button> <button type="button" class="btn btn-primary">Show in Depth</button> <button type="button" class="btn btn-primary">Delete Product</button> </div> <div> <div id="prod_view"> yo </div> </div> </div> </div> </div> 

Answer 2

另一种方法是使用单个flexbox类。 将其添加到该row和col-md-6 ：

.flex {
    display: flex;
}

<div class="container-fluid">
    <div class="row flex">
        <div class="col-md-6 flex" style="background-color: lightcyan">
            <div class="btn-group-vertical btn-group-lg">
                <button type="button" class="btn btn-primary">Quick Select</button>
                <button type="button" class="btn btn-primary">Show in Depth</button>
                <button type="button" class="btn btn-primary">Delete Product</button>
            </div>
            <div id="prod_view">
                yo
            </div>
        </div>
    </div>
</div>

http://www.codeply.com/go/wvCRJ0ufEB

在Bootstrap 4中， flexbox是默认设置，因此不需要额外的类。