Pythonメモ torinaブログ

このブログはDjangoとBootstrap4で作成されました
ソースコード

Bootstrapでフォームを中央寄せ

プログラミング関連 Bootstrap3
約398日前 2016年2月22日10:19

このような中央寄せの方法です
方法としてはいくつかあるので、Bootstrapの公式サンプルから抜粋してやってみましょう


http://getbootstrap.com/examples/jumbotron-narrow/

これはどのように中央寄せしているかというと、この部分です
@media (min-width: 768px)
.container {
    max-width: 730px;
}


@media (min-width: 768px)はウィンドウ幅768px以上のとき、を意味します
.conainerはBootstrapに元々あるクラスで、それを上書きしています
container自体は、このようなCSS指定になっています

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

margin-rightとmargin-leftにautoで、左右中央寄せしています
これと上書きしたmax-width:730pxで、上の画像のように表示されます


私が作ったソースはこのようなものになりました
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Center HTML</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      @media (min-width: 768px) {
        .container {
          max-width: 730px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
    <h1 class="page-header">中央寄せしてみましょー <small>フォーム部分に注目!</small></h1>
    <form>
      <div class="form-group">
        <label for="yourname">お名前</label>
        <input type="text" class="form-control" id="yourname">
      </div>
      <div class="form-group">
        <label for="yourpass">メールアドレス</label>
        <input type="email" class="form-control" id="yourpass">
      </div>
    </form>
    
    
    
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


http://getbootstrap.com/examples/cover/

こちらのサンプルもと大体おなじですね
cover-containerというものを作り、以下の指定です
@media (min-width: 992px) {
  .cover-container {
    width: 700px;
  }
}
@media (min-width: 768px)
 .cover-container {
    width: 100%;
}
.cover-container {
    margin-right: auto;
    margin-left: auto;
}


http://getbootstrap.com/examples/signin/

次はこのサンプルです。
中央寄せしているのは、以下の指定
基本的には、幅を指定してmargin:0 auto;等をすればいい塩梅です
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}



今回はcontinerではなくformに指定したので、外にあるh1なんかは元のままですね
ソースはこちらです
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Center HTML</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .myform {
        width:730px;
        margin:0 auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
    <h1 class="page-header">中央寄せしてみましょー <small>フォーム部分に注目!</small></h1>
    <form class="myform">
      <div class="form-group">
        <label for="yourname">お名前</label>
        <input type="text" class="form-control" id="yourname">
      </div>
      <div class="form-group">
        <label for="yourpass">メールアドレス</label>
        <input type="email" class="form-control" id="yourpass">
      </div>
    </form>
    
    
    
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


bootstrapのcenter-blockを使っても中央寄せはできます
center-blockは、幅を指定するのを忘れないようにしましょう
幅を指定すれば、center-blockのmargin-leftとmargin-rightのautoで中央によります
.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

この場合のソースは、こうなります
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Center HTML</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .myform {
        width:730px;
      }
    </style>
  </head>
  <body>
    <div class="container">
    <h1 class="page-header">中央寄せしてみましょー <small>フォーム部分に注目!</small></h1>
    <form class="center-block myform">
      <div class="form-group">
        <label for="yourname">お名前</label>
        <input type="text" class="form-control" id="yourname">
      </div>
      <div class="form-group">
        <label for="yourpass">メールアドレス</label>
        <input type="email" class="form-control" id="yourpass">
      </div>
    </form>
    
    
    
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


もう一つ便利な方法として、以下のいずれかを指定する方法があります
※xsの部分は好きに変更できます
<div class="col-xs-10 col-xs-offset-1">
<div class="col-xs-8 col-xs-offset-2">
<div class="col-xs-6 col-xs-offset-3">
<div class="col-xs-4 col-xs-offset-4">
<div class="col-xs-2 col-xs-offset-5">
<div class="col-xs-1 col-xs-offset-6">


offsetは左に空白をあけますので、左に1あけて、10使って、右には1あまる...
というように中央寄せができます
このように、ちゃんと中央に寄りますね


ソースはこうです
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Center HTML</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1 class="page-header">中央寄せしてみましょー <small>フォーム部分に注目!</small></h1>
      <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
          <form>
            <div class="form-group">
              <label for="yourname">お名前</label>
              <input type="text" class="form-control" id="yourname">
            </div>
            <div class="form-group">
              <label for="yourpass">メールアドレス</label>
              <input type="email" class="form-control" id="yourpass">
            </div>
          </form>
        </div><!-- /col -->
      </div><!-- /row -->
    </div><!--  container -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>