在Bootstrap模式中更改宽度

时间：2017-08-24 17:49:16

标签： ajax twitter-bootstrap bootstrap-modal

我希望状态，日期，时间和分钟都在一行中，而不是像现在一样在彼此之下。

我尝试了一切，无法弄清问题是什么。 请看看你是否可以提供帮助。

在此查看示例：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">

感谢您的帮助。谢谢你的帮助。

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：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/

相关问题
最新问题