web-dev-qa-db-ja.com

bootstrap列間に境界線があるグリッド

どのようにしてbootstrapグリッドに1行、その2列の内側に配置できます。最初の列のサイズは9 col-md-9で、2番目のサイズは3 col-md-3です。コンテンツは列の内側にあり、行と列はナイスであり、それらの間に境界線があります。

enter image description here

このようではありません：

enter image description here

これが 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>
htmlcsstwitter-bootstrap-3bootstrap-grid
6
user2818430

一般的な解決策は、フレックスボックスを使用することです。

これにより、列の高さが常に同じになります。

これがフィドルです： https://jsfiddle.net/Gt25L/1280/
（rowsとcolsは一般的すぎるので、特定のクラスを追加する必要があると思いますが、要点はわかったと思います）

.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>
3
Dennis Novac

わずかにゲットーしますが、列ではなく行の背景色を使用して、1つの列だけに境界線を追加できます（左側の列に常により多くのコンテンツがあると仮定します）。

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;
}
2
Christopher Messer

いずれかの要素の幅を指定してもかまわない場合は、負のマージンを使用してから、マージンの量だけ幅を増やすことができます。

.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>
0
Michael Coker

Boostrap4（フレックスボックス）を使用するか、ボックスシャドウをいじって、境界線を描画し、背景を親コンテナーに設定します。

インセットシャドウとアウトセットシャドウを描画すると、それらが重なるため、一番高いボックスに気付かないでしょう。

.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 4https://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>
0
G-Cyrillus