2017-06-29 55 views
0

我有兩個DateTimePicker,我想把它們放在我的標題中。我真的迷失了,我找不到任何東西把他們放在正確的地方。把日期時間選擇器(Bootstrap)放在我的標題中

該模板來自Bootstrap網站。

我添加了我的DateTime Picker部件到它,但沒有在所需的位置。我需要一些幫助或建議。

從這: enter image description here 要這樣: ![enter image description here 希望的地方: enter image description here

代碼添加:

div class="panel"> 
    <div class="panel-body"> 
     <form id="frm1"> 
      <div class="input-group"> 
       <span class="input-group-addon" id="basic-addon1">Start Date</span> 
       <input type="text" id='searchStartDate' name="searchStartDate" class="form-control" placeholder="Search start date" aria-describedby="basic-addon1"/> 
       <span class="input-group-addon" id="basic-addon3">End Date</span> 
       <input type="text" id='searchEndDate' name="searchEndDate" class="form-control" placeholder="Search end date" aria-describedby="basic-addon3"/> 
      </div> 
     </form> 
    </div> 
</div> 

代碼:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar { 
     margin-bottom: 0; 
     border-radius: 0; 
    } 

    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */ 
    .row.content {height: 550px} 

    /* Set gray background color and 100% height */ 
    .sidenav { 
     padding-top: 20px; 
     background-color: #f1f1f1; 
     height: 100%; 
    } 

    /* Set black background color, white text and some padding */ 
    footer { 
     background-color: #555; 
     color: white; 
     padding: 15px; 
    } 

    /* On small screens, set height to 'auto' for sidenav and grid */ 
    @media screen and (max-width: 767px) { 
     .sidenav { 
     height: auto; 
     padding: 15px; 
     } 
     .row.content {height:auto;} 
    } 
    </style> 
</head> 
<body> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="#">Logo</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Projects</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<div class="panel"> 
    <div class="panel-body"> 
     <form id="frm1"> 
      <div class="input-group"> 
       <span class="input-group-addon" id="basic-addon1">Start Date</span> 
       <input type="text" id='searchStartDate' name="searchStartDate" class="form-control" placeholder="Search start date" aria-describedby="basic-addon1"/> 
       <span class="input-group-addon" id="basic-addon3">End Date</span> 
       <input type="text" id='searchEndDate' name="searchEndDate" class="form-control" placeholder="Search end date" aria-describedby="basic-addon3"/> 
      </div> 
     </form> 
    </div> 
</div>  
<div class="container-fluid text-center">  
    <div class="row content"> 
    <div class="col-sm-2 sidenav"> 
     <p><a href="#">Link</a></p> 
     <p><a href="#">Link</a></p> 
     <p><a href="#">Link</a></p> 
    </div> 
    <div class="col-sm-8 text-left"> 
     <h1>Welcome</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     <h3>Test</h3> 
     <p>Lorem ipsum...</p> 
    </div> 
    <div class="col-sm-2 sidenav"> 
     <div class="well"> 
     <p>ADS</p> 
     </div> 
     <div class="well"> 
     <p>ADS</p> 
     </div> 
    </div> 
    </div> 
</div> 

<footer class="container-fluid text-center"> 
    <p>Footer Text</p> 
</footer> 

</body> 
</html> 

回答

1

您可以使用此

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar { 
     margin-bottom: 0; 
     border-radius: 0; 
    } 

    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */ 
    .row.content {height: 550px} 

    /* Set gray background color and 100% height */ 
    .sidenav { 
     padding-top: 20px; 
     background-color: #f1f1f1; 
     height: 100%; 
    } 

    /* Set black background color, white text and some padding */ 
    footer { 
     background-color: #555; 
     color: white; 
     padding: 15px; 
    } 

    /* On small screens, set height to 'auto' for sidenav and grid */ 
    @media screen and (max-width: 767px) { 
     .sidenav { 
     height: auto; 
     padding: 15px; 
     } 
     .row.content {height:auto;} 
    } 
    </style> 
</head> 
<body> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="#">Logo</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Projects</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     </ul> 

     <form id="frm1" class="navbar-form navbar-left"> 
      <div class="input-group"> 
       <span class="input-group-addon" id="basic-addon1">Start Date</span> 
       <input type="text" id='searchStartDate' name="searchStartDate" class="form-control" placeholder="Search start date" aria-describedby="basic-addon1"/> 
      </div> 
      <div class="input-group"> 
       <span class="input-group-addon" id="basic-addon3">End Date</span> 
       <input type="text" id='searchEndDate' name="searchEndDate" class="form-control" placeholder="Search end date" aria-describedby="basic-addon3"/> 
      </div> 
     </form> 

    </div> 
    </div> 
</nav> 



<div class="container-fluid text-center">  
    <div class="row content"> 
    <div class="col-sm-2 sidenav"> 
     <p><a href="#">Link</a></p> 
     <p><a href="#">Link</a></p> 
     <p><a href="#">Link</a></p> 
    </div> 
    <div class="col-sm-8 text-left"> 
     <h1>Welcome</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     <h3>Test</h3> 
     <p>Lorem ipsum...</p> 
    </div> 
    <div class="col-sm-2 sidenav"> 
     <div class="well"> 
     <p>ADS</p> 
     </div> 
     <div class="well"> 
     <p>ADS</p> 
     </div> 
    </div> 
    </div> 
</div> 

<footer class="container-fluid text-center"> 
    <p>Footer Text</p> 
</footer> 

</body> 
</html> 
+0

我搜索了像3個小時,我希望有天我成爲了自舉和如果我想他們之間的一些空間,怎麼辦那? –

+0

我已經添加了輸入組類。你能再次檢查嗎? –

相關問題