日付からCSSレイアウトへの応答日

日付からレイオットまでの日付を取得するにはどうすればよいのでしょうか。だから、のようなものでなければなりません：私は（ブートストラップの祝福で）すでに構築してきました日付からCSSレイアウトへの応答日

float center for below two lines 
<label for date from><input datepicker> <label for date to><input datepicker>//line 1 
<button>//line 2

：携帯電話山車のことが全体のレイアウトを破壊するの横に

<div class="row"> 
    <div class="col-sm-12 col-md-6"> 
     <div class="float-right"> 
      <span>date from</span> 
      <input> 
     </div> 
    </div> 
    <div class="col-sm-12 col-md-6"> 
     <div class="float-left"> 
      <span>date to</span> 
      <input> 
     </div> 
    </div> 
</div>

、それはほとんど、私のニーズに適合します。あなたは、私が正しく理解していれば

label from 
input 
label to 
input

出典

2016-10-24 user2771738

私は、CSS

<form class="form-inline text-center"> 
    <div class="form-group"> 
     <label for="exampleInputEmail3">Email address</label> 
     <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email"> 
    </div> 
    <div class="form-group"> 
     <label for="exampleInputPassword3">Password</label> 
     <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> 
    </div> 
    <div class="form-check"> 
     <label class="form-check-label"> 
      <input class="form-check-input" type="checkbox"> Remember me 
     </label> 
    </div> 
    <button type="submit" class="btn btn-primary">Sign in</button> 
</form>

出典

2016-10-27 09:46:36 user2771738

：私はそれらのフロートのdivがフロートは次のように機動レイアウトを作成するために、スパンと入力の両方に小さな解像度の幅に100％を作るために解像度や、よりよい解決策に依存して、いくつかの方法をダイナミック持つべきだと思います浮動小数点をまったく使用する必要はありません。ブートストラップは自動的に<div>のアライメントを処理します。 2つの入力フィールドの順序を逆にするだけです。最初のものは左にあります。

出典

2016-10-24 22:08:47 Kai

あなたはすでにこれを持っている場合。これに関する質問がある場合。コメントで私に尋ねてください。もし私が何か間違いを犯すならば。以下にコメントしてください私はあなたの問題を解決するために全力を尽くします。がんばろう。

$(document).ready(function() { 
 
     $('.pickyDate').datepicker({ 
 
      format: "dd/mm/yyyy" 
 
     }); 
 
    });

.right{float:right !important;} 
 
.col-sm-12{width:50% !important;} 
 
@media only screen and (max-width:768px) { 
 
    .col-sm-12{width:100% !important;} 
 
.right{float:none !important;} 
 
input.pickyDate{width:100%;} 
 
    /*Usefull class*/ 
 
    .topMar { 
 
    margin-top: 20px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> 
 

 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" /> 
 
</head> 
 
<body> 
 
<div class="container-fluid"> 
 
<div class="row"> 
 
    <div class="col-md-6 col-sm-12"> 
 
    <div class="right"> 
 
     <span class="lable">date from</span> 
 
     <input type="text" placeholder="click to show datepicker" class="pickyDate" /> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-12 topMar"> 
 
    
 
     <span class="lable">date to</span> 
 
     <input type="text" placeholder="click to show datepicker" class="pickyDate" /> 
 
    
 
    </div> 
 
</div> 
 
</div> 
 
</body>

出典

2016-10-24 23:10:54

ほとんどをbotstrap使って素敵な解決策を見つけました。大画面ラベルでは、改行を作成すべきではありません。 – user2771738

おっと...大画面にしたいのですか？ –

（大規模） - すべてのコンポーネントが1行で表示されます。モバイル上の - 新しいコンポーネントとしての各コンポーネント（すでに正常に動作しています） – user2771738

日付からCSSレイアウトへの応答日

答えて

関連する問題