Question

我对Web开发一般都比较新，并且遇到布局危机：我有一个 container-fluid ，它将行分成两个* 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

这是一个灵活的布局，可以做到这一点。您可以使用justify-content属性来影响水平对齐，align-items会影响垂直对齐。这是flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

的可视指南

＆＃13;

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

＆＃13;

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

＆＃13;

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 is default所以不需要额外的课程。

在Bootstrap中使用网格系统

2 个答案: