날짜에서 CSS 레이아웃까지의 반응 일

date에서 layot까지 날짜를 얻는 가장 좋은 방법은 무엇일까?날짜에서 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>

및 모바일 수레에 그 전체 레이아웃을 파괴 옆에 그 거의 내 요구에 맞는. 처럼 그 플로트 div의 작은 해상도에 만드는 방법을 동적 플로트 해상도 또는 더 나은 솔루션에 따라 몇 가지를해야한다고 생각은 moblie 레이아웃을 만들기 위해 모두 범위 및 입력을 100 % 폭 : 만약 내가 제대로 이해하고

label from 
input 
label to 
input

출처

2016-10-24 user2771738

나는

<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>의 정렬을 처리합니다. 두 입력 필드의 순서를 반대로하십시오. 첫 번째 것은 왼쪽에있을 것입니다.

출처

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

거의 CSS를 botstrap 사용하여 좋은 솔루션을 발견했다. 큰 화면 라벨에서는 새 줄을 만들어서는 안됩니다. – user2771738

죄송합니다. 큰 화면에서 원하는 것을 원하십니까 ??? –

- 한 줄에 모든 구성 요소가 있습니다. 휴대 전화의 - 새로운 구성 요소로 각 구성 요소 (이미 잘 작동 함) – user2771738

날짜에서 CSS 레이아웃까지의 반응 일

답변

관련 문제