web-dev-qa-db-ja.com

bootstrap gridを使用して行の中央にテキストを配置

私はプロジェクトのモックアップを書き始めていました。基本的に、私はbootstrap gridsを使用して、次のような構造を取得します。

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2">...</div>
    <div class="col-xs-6">Main Title</div>
    <div class="col-xs-4">...</div>
  </div>
</div>

ここに完全なフィドルがあります： https://jsfiddle.net/f8fn9Los/4/

私がしたいことは、メインタイトルを列ではなく行全体の中央に配置することです。このグリッド構造を維持しながら、これを行う方法はありますか？

Ps：私は他の方法でこれを行うことができることを知っていますが、グリッドでこれを達成する方法があるかどうか疑問に思っていました。

ありがとう！

htmlcsstwitter-bootstraptwitter-bootstrap-3
6
Nicolas Barlogis

.text-centerあなたに.project-nameテキストをcenterに揃えるので、私が提案できるのはpseudo selector ::before 以下のように、

.text-center::before{
  content:"";
  margin-left:calc(100% - 75%);
}
5
frnt

これはあなたが探しているものです。

<section>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 center-block text-center">
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
</section>
4
Zachary St Amant

Main Tittleについてのみ、別の行を取得できます

<div class="container-fluid">
  <div class="row">
     <h1 class="text-center">Project Name</h1>
  </div>
</div>

次に、他の要素に別の行を配置できます。

2
Mr. Perfectionist

ブートストラップのcol-xs-offset- *クラスを使用してみてください。

詳細については、このリンクをご覧ください。 ここにリンクの説明を入力してください

1
alex141097