html - 在 Bootstrap 中使用网格系统

Question

总体而言，我对 Web 开发还比较陌生，并且遇到了布局危机:我有一个 container-fluid，它有一个 row 分成两个 *col-md -6*秒。在 col-md-6 中，我希望能够水平放置元素。如我的代码/图片所示；我正在尝试制作一个简单的 div，它是 button-group 高度的 95% 并显示在它旁边......但是它显示在它下面并且非常短(我想要它与按钮组一样高)。像这样在 Bootstrap 中调整/定位元素的协议(protocol)是什么？

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