我希望狀態,日期,時間和分鐘都在一行中,而不是像現在一樣低於另一行。更改自舉模式中的寬度
我嘗試了一切,無法弄清楚問題所在。 請看看你能否幫忙。
查閱這裏的例子:http://plnkr.co/edit/Sfc0ypXnd8vgv7DirK20?p=preview
CODE:
<style class="cp-pen-styles">[type=date] {
background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat ;
}
[type=date]::-webkit-inner-spin-button {
display: none;
}
[type=date]::-webkit-calendar-picker-indicator {
opacity: 0;
}
/* custom styles */
label {
display: block;
}
input {
border: 1px solid #c4c4c4;
border-radius: 5px;
background-color: #fff;
padding: 3px 5px;
box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
width: 190px;
}
.auto-style1 {
color: #FFFFFF;
background-color: #006699;
}
.auto-style1x {
color: #FFFFFF;
background-color: #006699;
text-align: right;
}
$('#testBtn').click(function() {
var cnt=4;
var btn = $(this);
btn.button('loading');
setTimeout(function() {
cnt++;
btn.button('reset');
btn.text(' ' + cnt);
}, 1000);
});
$('#testBtnDown').click(function() {
var cnt=4;
var btn = $(this);
btn.button('loading');
setTimeout(function() {
if (cnt > 0) {
cnt--;
}
btn.button('reset');
btn.text(' ' + cnt);
}, 1000);
});
.auto-style10 {
text-align: left;
}
.auto-style10x {
text-align: right;
}
.auto-style12 {
text-align: center;
}
.auto-style13 {
color: #FFFFFF;
background-color: #006699;
text-align: center;
}
.auto-style14 {
text-align: left;
}
</style>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Status</h4>
</div>
<!-- /modal-header -->
<div class="modal-body">
<form style="width: 100%;">
<br>
<label for="status-group">Status</label>
<SELECT name="statusSel" class="form-control" style="width: 200px;">
<option name="statusOpt" id="status" value="1">Test</option>
</SELECT>
<BR>
<div class="form-group">
<label for="date-group">Date</label>
<input type="date" name="date" id="date" style="width: 150px;">
<label for="time-group">Time</label>
<select name="hours" class="form-control" style="width: 160px;">
<option value='0'>00 - 12/Midnight</option>
<option value='1'>01 - 1am</option>
<option value='2'>02 - 2am</option>
<option value='3'>03 - 3am</option>
<option value='4'>04 - 4am</option>
<option value='5'>05 - 5am</option>
<option value='6'>06 - 6am</option>
<option value='7'>07 - 7am</option>
<option value='8'>08 - 8am</option>
<option value='9'>09 - 9am</option>
<option value='10'>10 - 10am</option>
<option value='11'>11 - 11am</option>
<option value='12'>12 - Noon</option>
<option value='13'>13 - 1pm</option>
<option value='14'>14 - 2pm</option>
<option value='15'>15 - 3pm</option>
<option value='16'>16 - 4pm</option>
<option value='17'>17 - 5pm</option>
<option value='18'>18 - 6pm</option>
<option value='19'>19 - 7pm</option>
<option value='20'>20 - 8pm</option>
<option value='21'>21 - 9pm</option>
<option value='22'>22 - 10pm</option>
<option value='23'>23 - 11pm</option>
</select>
<label for="minutes-group">Minutes</label>
<select name="minutes" class="form-control" style="width: 80px;">
<option value='00'>00</option>
<option value='01'>01</option>
<option value='02'>02</option>
<option value='03'>03</option>
<option value='04'>04</option>
<option value='05'>05</option>
<option value='06'>06</option>
<option value='07'>07</option>
<option value='08'>08</option>
<option value='09'>09</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
<option value='32'>32</option>
<option value='33'>33</option>
<option value='34'>34</option>
<option value='35'>35</option>
<option value='36'>36</option>
<option value='37'>37</option>
<option value='38'>38</option>
<option value='39'>39</option>
<option value='40'>40</option>
<option value='41'>41</option>
<option value='42'>42</option>
<option value='43'>43</option>
<option value='44'>44</option>
<option value='45'>45</option>
<option value='46'>46</option>
<option value='47'>47</option>
<option value='48'>48</option>
<option value='49'>49</option>
<option value='50'>50</option>
<option value='51'>51</option>
<option value='52'>52</option>
<option value='53'>53</option>
<option value='54'>54</option>
<option value='55'>55</option>
<option value='56'>56</option>
<option value='57'>57</option>
<option value='58'>58</option>
<option value='59'>59</option>
</select>
<BR>
</div>
<!-- /modal-body -->
<div class="auto-style14">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</form>
<!-- /modal-footer -->
<HR>
<!-- /modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- /modal-footer -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
感謝您的幫助。謝謝你的幫助。