bootstrap

Question

###前提・実現したいこと
visual studio2015 asp.net開発
bootstrapにて画面設計

###発生している問題・エラーメッセージ

ログイン画面の作成です。
具体的には、ログインの画面を、ブラウザの中央部に配置したいです。
それから、ブラウザの画面を狭めた時に、emailというタイトルが上にくるのを避けたいです。

###ソースコード
<div class="container" style="padding:20px 0;">

    <div class="panel panel-primary">
        <div class="panel-heading text-center">
            ログイン
        </div>    
        <div class="panel-body">                
            <div class="form-horizontal" style="margin-bottom:15px">
                <div class="form-group">                        
                    <label class="control-label col-sm-2" for="emall">Email</label>                
                    <div class="col-sm-4">
                        <asp:TextBox ID="TextBox3" runat="server" CssClass="form-control input-sm"></asp:TextBox>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="emall">Pasword</label>                
                    <div class="col-sm-4">
                        <asp:TextBox ID="TextBox4" runat="server" CssClass="form-control input-sm"></asp:TextBox>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-4">
                        <asp:Button ID="Button2" runat="server" Text="ﾛｸﾞｲﾝ" CssClass="btn btn-primary" />                    
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

###補足情報(言語/FW/ツール等のバージョンなど)

Answer 1

Bootlint - Bootstrapサイトの検証に！

Bootstrap は独自の制約があるので、その流儀に従わないといけません。提示のコードにもまずい部分があるので、チェックしてみてください。

Comments

[shinji1]

コメントありがとうございます。自分の勉強不足を痛感しております。

情報提供まで有難うございます。

Answer 2

どちらもWebの標準的な考え方や設計思想に基いて作られています。
Bootstrapの上からCSSを上書きすることは可能ですが、
まずはその是非を考えてみてください。

具体的には、ログインの画面を、ブラウザの中央部に配置したいです。

.panel.panel-primary.login {
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
}

<div class="panel panel-primary">
↓
<div class="panel panel-primary login">

一つの手法で試してみただけなので動くかどうかはあまり自信ないですが、
こんな感じで動作しませんか？
動いたとしても所詮やっつけで作成したものなので、下記は必ず確認しておいてください

• 縦幅の狭いデバイス（スマホ等）ではレイアウトが崩れないか
• 中央に持ってきたログイン画面はposition指定があるのでヘッダーの手前に来ます。

http://coliss.com/articles/build-websites/operation/css/css-centering-in-the-unknown-by-css-tricks.html
ダメなら上記サイトのように「css fixed 中央」等で検索すれば沢山ヒントが出るかと思います。

ブラウザの画面を狭めた時に、emailというタイトルが上にくるのを避けたいです。

BootstrapのContainerという概念の利用をやめれば実現出来そうです。

スマホでフォーム入力画面を見た場合
タイトル部が左にあると右側のスペースが著しく小さくなり入力が出来なくなります。
（基本的にiPhone4Sで20文字程度しか横に入りません）

多数のスマホサイトでは、
タイトル部が上部に来るように配置を変更することで上記問題に対策しています。
（これが基本ですので、質問者さんが嫌かどうかはさておき、ユーザー側からはあまり違和感ないと思います。）

どうしても避ける必要があるのであれば、
レスポンシブ対応を行わないCSSフレームワークを使う選択肢もありますので、検討してみてください。

Comments

[miyabi-sun]

BAに選んでいただきありがとうございます。
ちょっと強い書き方になってしまったかと思いまして、推敲しておりました。

BootstrapはこれがモダンなWebページ！
…ということをある種押し付ける、アクの強いフレームワークだと思ってます。

何も考えずに全て従うには楽ですが、デザインの都合で逆らわざるを得ないケースもあり、その結果やりたい事と仕様が衝突する使いにくい側面もあると感じています。
Gumby等ゆる～い仕様のCSSフレームワークもありますので、色々と検討してみてはどうかと考えています。

[shinji1]

稚拙な質問に、丁寧な回答ありがとうございます。

中央配置の件ですが、現状styleでwidthを指定して、回答者さんのおっしゃるように、marginを設定することによりなんとか解決しました。
せっかくですので、回答者さんのcssの方法もさっそく試してみたいと思います。

文字の位置が上に来る問題ですが、やはりbootstrapはそういった仕様のようなものなんですかね…。bootstrapではあまり横並びの画面設計は奨励されていないのですかね…。
今後遷移先の画面では、入力項目の多数ある感じの画面を設計するつもりですので、こういった質問に丁寧に教えていただいてありがとうございます。