9

我怎样才能在一行和两列内制作一个引导网格。第一列大小为 9 col-md-9 和第二列大小为 3 col-md-3,无论内容在列内多长时间,行和列都会很好并且它们之间有边界。我该怎么做?它应该如下所示:

在此处输入图像描述

不像这样:

在此处输入图像描述

这是一个jsfiddle

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <div class="col-xs-9">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
 
  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>

4

5 回答 5

5

一个通用的解决方案是使用 flexbox。

这将允许您的列始终具有相同的高度。

这是一个小提琴:https
://jsfiddle.net/Gt25L/1280/ (我想你必须添加特定的类,因为rowscols太笼统了,但我相信你明白了)

.row {
  display: flex;
}

.row > div {
  flex: 1;
  background: lightgrey;
  border: 1px solid grey;
}
<div class='row'>
  <div class="col-xs-9">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
 
  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>

于 2017-08-10T17:21:00.157 回答
2

有点贫民窟,但您可以在行上使用背景色,而不是在列上,并在其中一列上添加边框(假设您总是在左列上有更多内容)

https://jsfiddle.net/Gt25L/1277/

<div class="container">
<div class='row'>
  <div class="col-xs-9 border">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg

  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>
</div>
.row {
  background: lightgrey;
  border: 1px solid grey;
}

.border {
  border-right: 1px solid black;
}
于 2017-08-10T17:17:47.357 回答
0

您可以使用 boostrap4 (flexbox) 或使用 box-shadow 来绘制边框并将背景设置到父容器中:

绘制插图和起点阴影会使它们重叠,因此您不会注意到最高的盒子。

.row {
  background: lightgrey;
  border-top: 2px solid grey;
  box-shadow: 0 2px grey, inset 2px 0 gray, inset -2px 0 grey;
  overflow: hidden;
}

.row>div {
  box-shadow: 2px 0 grey, inset 2px 0 grey
}


/* demo purpose*/

.row {
  margin: auto!important;
  max-width: 80%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class='row'>
  <div class="col-xs-9">
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg

  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>
<div class='row'>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
  <div class="col-xs-9">
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg

  </div>
</div>


关于bootsrap 4 https://v4-alpha.getbootstrap.com/

.row>div {
  background: lightgrey;
  border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class='row'>
    <div class="col-9 col-xs-9">
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg

    </div>
    <div class="col-3 col-xs-3">Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
    </div>
  </div>
  <div class='row d-flex'>
    <div class="col-3 col-xs-3">Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
    </div>
    <div class="col-9 col-xs-9">
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg

    </div>
  </div>
</div>

于 2017-08-10T18:50:07.110 回答
0

如果您不介意指定其中一个元素的宽度,则可以使用负边距,然后将宽度增加边距量。

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}

.row > div:last-child {
  margin-left: -1px;
  width: calc(25% + 1px);
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class='row'>
    <div class="col-xs-9">
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
      <br>Hifgdfgsdfg

    </div>
    <div class="col-xs-3">Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg

      <br>
      <br>Hifgdfgsdfg
    </div>
  </div>

于 2017-08-10T17:25:36.427 回答
-1

您可以使用<div class="col-xs-offset-1">环绕文本来抵消它,避免任何额外的 CSS。请参阅下面的片段:

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <div class="col-xs-9">
     <div class="col-xs-offset-1">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
  </div>
  </div>
  <div class="col-xs-3">
     <div class="col-xs-offset-1">
        Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
  </div>
</div>

于 2017-08-10T17:15:41.417 回答