2017-08-24 123 views
0

我希望狀態,日期,時間和分鐘都在一行中,而不是像現在一樣低於另一行。更改自舉模式中的寬度

我嘗試了一切,無法弄清楚問題所在。 請看看你能否幫忙。

查閱這裏的例子: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">&times;</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"> 

感謝您的幫助。謝謝你的幫助。

回答

1

你可以玩的引導電網:

<div class='row'> 
    <div class='col-xs-3'> 
     [status code here] 
    </div> 
    <div class='col-xs-3'> 
     [date code here] 
    </div> 
    <div class='col-xs-3'> 
     [time code here] 
    </div> 
    <div class='col-xs-3'> 
     [minute code here] 
    </div> 
</div> 

您可以在這裏瞭解更多https://getbootstrap.com/docs/3.3/examples/grid/

2

有兩種解決方案,浮現在腦海中,這兩者的結合.form-horizontal與引導電網。

(1)讓你的標籤全部顯示在元件上方

<div class="form-horizontal"> 
    <div class="form-group"> 
     <label for="status" class="col-xs-3">Status</label> 
     <label for="date" class="col-xs-3">Date</label> 
     <label for="hour" class="col-xs-3">Hour</label> 
     <label for="minutes" class="col-xs-3">Minutes</label> 

     <div class="col-xs-3"><select name="status" class="form-control"></select></div> 
     <div class="col-xs-3"><input type="date" name="date" class="form-control"></div> 
     <div class="col-xs-3"><select name="hour" class="form-control"></select></div> 
     <div class="col-xs-3"><select name="minutes" class="form-control"></select></div> 
    </div> 
</div> 

(2)讓你的標籤出現在線路與每個表單元素

<div class="form-horizontal"> 
    <div class="form-group"> 
     <div class="col-xs-3"> 
      <label for="status" class="control-label col-xs-3">Status</label> 
      <div class="col-xs-9"><select name="status" class="form-control"></select></div> 
     </div> 

     <div class="col-xs-3"> 
      <label for="date" class="control-label col-xs-3">Date</label> 
      <div class="col-xs-9"><input type="date" name="date" class="form-control"></div> 
     </div> 

     <div class="col-xs-3"> 
      <label for="hour" class="control-label col-xs-3">Hour</label> 
      <div class="col-xs-9"><select name="hour" class="form-control"></select></div> 
     </div> 

     <div class="col-xs-3"> 
      <label for="minutes" class="control-label col-xs-3">Minutes</label> 
      <div class="col-xs-9"><select name="minutes" class="form-control"></select></div> 
     </div> 
    </div> 
</div>