いつもお世話になっております。
###前提・実現したいこと
bootstrap3
添付資料のような画面をbootstrap3を利用して作成したい。
画面サイズが小さくなっても、スクロールバーがでず、
また、各々の項目が小さくなるにつれ、縦に積み重ねられるため、
添付資料のような画面にできません。
いろいろと試して見ていますが、はまってしまい・・・
何か、こういう事をやっているサンプル画面がありませんか?
不動産のサイトのソースをみても、オリジナルのCSSぽいので・・
何のキーワードで、サンプルを探せばいいのかも想像つかず、
皆さんのお知恵をお借りしたく、投稿しました。
検索ワードや、ヒントでも構いませんので、ご教授ください。
いつも、教えてクレクレで申し訳ありませんが、どなたか
お付き合い頂ければと。。。よろしくお願いします。
###該当のソースコード
<div class="container"> <div class="row"> <div class="col-xs-12"> <div class="table-responsive"> <table class="table table-bordered"> <tbody> <tr> <td> <table class="table"> <tr> <td rowspan="4" class="col-xs-2"> <img src="kaoimg/kao-jyosei-01.jpeg" alt="kao-jyosei-01" width="50%" height="50%" class="img-responsive center-block"> </td> <td class="col-xs-8" style="table-layout: fixed;"> <div class="form-inline"> <div class="input-group col-xs-4"> <span class="input-group-addon">氏名</span> <input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly> </div> <div class="input-group col-xs-2"> <span class="input-group-addon">性別</span> <input type="text" class="form-control" id="namae-eng" placeholder="男性" readonly> </div> <div class="input-group col-xs-3"> <span class="input-group-addon">生年月日</span> <input type="text" class="form-control" id="namae-eng" placeholder="1911/11/11" readonly> </div> <div class="input-group col-xs-2"> <span class="input-group-addon">年齢</span> <input type="text" class="form-control" id="namae-eng" placeholder="23歳" readonly> </div> </div> </td> </tr> <tr> <td class="col-xs-8"> <div class="form-inline"> <div class="input-group col-xs-3"> <span class="input-group-addon">ほげほげ</span> <input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly> </div> <div class="input-group col-xs-3"> <span class="input-group-addon">ほげほげ日</span> <input type="text" class="form-control" id="namae-eng" placeholder="2016/11/11" readonly> </div> <div class="input-group col-xs-3"> <span class="input-group-addon">ほげほげ日</span> <input type="text" class="form-control" id="namae-eng" placeholder="2019/11/11" readonly> </div> <div class="input-group col-xs-2"> <span class="input-group-addon">ほげほげ</span> <input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly> </div> </div> </td> </tr> <tr> <td class="col-xs-8"> <div class="form-inline"> <div class="input-group col-xs-3"> <span class="input-group-addon">ほげほげ</span> <input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly> </div> <div class="input-group col-xs-3"> <span class="input-group-addon">ほげほげ</span> <input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly> </div> <div class="input-group col-xs-3"> <span class="input-group-addon">婚姻</span> <input type="text" class="form-control" id="namae-eng" placeholder="既婚" readonly> </div> <div class="input-group col-xs-2"> <span class="input-group-addon">子供</span> <input type="text" class="form-control" id="namae-eng" placeholder="あり" readonly> </div> </div> </td> </tr> <tr> <td class="col-xs-8"> <div class="form-inline"> <div class="input-group col-xs-3"> <span class="input-group-addon">分類</span> <input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly> </div> <div class="input-group col-xs-3"> <span class="input-group-addon">分類</span> <input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly> </div> <div class="input-group col-xs-3"> <span class="input-group-addon">分類</span> <input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly> </div> <div class="input-group col-xs-2"> <a href="#"><button type="submit" class="btn btn-default btn-xs">詳細</button></a> </div> </div> </td> </tr> </table> <td> </tr> </tbody> </table> </div> </div> </div> <!-- row --> </div> <!-- container -->
###試したこと
課題に対してアプローチしたことを記載してください
###補足情報(言語/FW/ツール等のバージョンなど)
従前からも、gridシステムで作った方がいいとご指導頂いて
いますが、なかなか慣れず、テーブルを多用してしまってます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/09 12:57
2016/10/10 14:31
2016/10/10 15:03
2016/10/11 03:50
2016/10/11 04:05
2016/10/11 14:33