2

4 つのcol-sm-3列を持つ行があります。この行の中央にテキストを配置する必要があります。つまり、テキストは 2 列目と 3 列目にまたがる必要があります。

これが私のブートプライです

ここにいくつかのコードがあります：

<div class="row">
  <div class="col-md-3" style="background-color:yellow">123</div>
  <div class="col-md-3" style="background-color:green">456</div>
  <div class="col-md-3" style="background-color:red">789</div>
  <div class="col-md-3" style="background-color:grey">000</div>
</div>

プラス：明確にするために、テキストを同じ行に重ねる必要があります。

4

3 に答える 3

8

追加するだけ

<div class="text-center">Center aligned text.</div>

このようなすべての列の前に

<div class="row">
  <div class="text-center">Center aligned text.</div>
  <div class="col-md-3" style="background-color:yellow">123</div>
  <div class="col-md-3" style="background-color:green">456</div>
  <div class="col-md-3" style="background-color:red">789</div>
  <div class="col-md-3" style="background-color:grey">000</div>
</div>

ただし、設定された量の列のみを使用する場合は、次のような別の行とオフセットが必要です

<div class="row">
  <div class="col-md-offset-3 col-md-6">
    <div class="text-center">Center aligned text.</div>
  </div>
</div>
<div class="row">
  <div class="col-md-3" style="background-color:yellow">123</div>
  <div class="col-md-3" style="background-color:green">456</div>
  <div class="col-md-3" style="background-color:red">789</div>
  <div class="col-md-3" style="background-color:grey">000</div>
</div>

編集: そのテキストを文字通りこれら 2 つのスパンにまたがる/フロートさせたい場合は、「Shawn Taylor」が提案したようなものが必要になります。

<div class="row">
  <div class="col-md-3" style="background-color:yellow">123</div>
  <div class="col-md-6" style="position:relative;">
    <div style="position: absolute; z-index: 2; left: 0; top: 0; width: 100%;" class="text-center">Center aligned text.</div>
    <div class="row">
      <div class="col-md-6" style="background-color:green">456</div>
      <div class="col-md-6" style="background-color:red">789</div>
    </div>
  </div>
  <div class="col-md-3" style="background-color:grey">000</div>
</div>
于 2014-06-27T13:30:06.027 に答える
2 
<div class="row">
  <div class="col-md-3 text-center" style="background-color:yellow">123</div>
  <div class="col-md-3 text-center" style="background-color:green">456</div>
  <div class="col-md-3 text-center" style="background-color:red">789</div>
  <div class="col-md-3 text-center" style="background-color:grey">000</div>
</div>

テキストを中央に配置する親 div に「text-center」を配置するだけです。

更新された Bootply

テキストをすべての上にまたがらせたい場合は、次のようにします。

<div class="row">
  <div class="col-md-offset-3 text-center col-md-6">Text Centered</div>
  <div class="clearfix"></div>
  <div class="col-md-3 text-center" style="background-color:yellow">
    123
  </div>
  <div class="col-md-3 text-center" style="background-color:green">456</div>
  <div class="col-md-3 text-center" style="background-color:red">789</div>
  <div class="col-md-3 text-center" style="background-color:grey">000</div>
</div>

その後、緑と赤を通過しません ( http://www.bootply.com/v3UP7Mjy4s )。

于 2014-06-27T16:47:17.517 に答える
2

position:relative および position:absolute は、中央の 2 つの列内の親行と子行でこれを整理します。

<div class="row">
  <div class="col-md-3 text-center" style="background-color:yellow">123</div>

  <div class="col-md-6" style="position:relative;">
    <div class="row">
      <span class="col-md-12 text-center" style="position:absolute;top:0px;left:0px;z-index:1000;color:white">I'm spanning!</span>
      <div class="col-md-6 text-center" style="background-color:green">456</div>
      <div class="col-md-6 text-center" style="background-color:red">789</div>
    </div>
  </div>

  <div class="col-md-3 text-center" style="background-color:grey">000</div>
</div>

それはきれいではありませんが、うまくいきます！

http://www.bootply.com/PsWW8czbb8

于 2014-06-28T04:01:40.697 に答える