Question

我正在尝试使用表单的整个宽度将3个元素彼此相邻。请参阅下面的屏幕截图和Bootstrap 3代码。

任何人都知道为什么输入元素不会调整以适应整个宽度？

编辑：添加了其他代码。还有一些文字，因为我不允许发布大部分代码？还有一些文字，因为我不允许发布大部分代码？还有一些文字，因为我不允许发布大部分代码？还有一些文字，因为我不允许发布大部分代码？

   

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal" role="form" method="post" action="mmm.php">

<div class='container-fluid' style="padding: 8px;">
<div class='row'>
    <div class='col-sm-12'>
        <div class="input-group form-group">
            <select id="ID" name="ID" class="form-control selectpicker"
                    data-live-search="true"
                    style="">
<option value='559'>(559)</option>

            </select>

            <span class="input-group-btn">
            <button id="GPS" class="btn btn-primary" type="button" onclick="loadCoordinates()">
                <span id="icon" class="glyphicon glyphicon-screenshot"></span></button>
            </span>

        </div>
    </div>
</div>


<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <label for="dato" class="">When:</label>
            <div class='input-group'>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                <input type='text'
                       value='10.10.2017'
                       name="dato"
                       class="form-control"
                       id="datoPicker"
                       readonly/>

            </div>
        </div>
    </div>
</div>

<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    <input type='text'
                           value='07:00'
                           name="fraKlokken"
                           class="form-control fraTimepicker"
                           id="fraKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text'
                           value='15:00'
                           name="tilKlokken"
                           class="form-control tilTimepicker"
                           id="tilKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <select class="form-control" id="lunchSelect"  name="lunsj">
                  <option value="0">No lunch</option>
                  <option value="30">30m lunch</option>
                  <option value="60">60m lunch</option>
                </select>
            </div>
        </div>
    </div>
</div>



<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <label class="control-label" for="kommentar">Comment:</label>

                <textarea class="form-control input" id="kommentar" name="kommentar"
                          placeholder="."
                          ></textarea>
        </div>
    </div>
</div>



<div class='row '>
    <div class='col-sm-12'>
        <div class="form-group">
            <label for="timearbeid">m,n,mn</label>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn">
                    <input type="radio"
                           value="1"
                           required ><i
                            class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Yes</span>
                </label>

                <label class="btn">
                    <input type="radio" class=""
                           value="0" >
                    <i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> No</span>
                </label>
            </div>
        </div>
    </div>
</div>

Answer 1

您正在使用表单组类两次。从内部类中删除它将起到作用

   

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal" role="form" method="post" action="mmm.php">

<div class='container-fluid' style="padding: 8px;">
<div class='row'>
    <div class='col-sm-12'>
        <div class="input-group form-group">
            <select id="ID" name="ID" class="form-control selectpicker"
                    data-live-search="true"
                    style="">
<option value='559'>(559)</option>

            </select>

            <span class="input-group-btn">
            <button id="GPS" class="btn btn-primary" type="button" onclick="loadCoordinates()">
                <span id="icon" class="glyphicon glyphicon-screenshot"></span></button>
            </span>

        </div>
    </div>
</div>


<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <label for="dato" class="">When:</label>
            <div class='input-group'>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                <input type='text'
                       value='10.10.2017'
                       name="dato"
                       class="form-control"
                       id="datoPicker"
                       readonly/>

            </div>
        </div>
    </div>
</div>

<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    <input type='text'
                           value='07:00'
                           name="fraKlokken"
                           class="form-control fraTimepicker"
                           id="fraKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text'
                           value='15:00'
                           name="tilKlokken"
                           class="form-control tilTimepicker"
                           id="tilKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <select class="form-control" id="lunchSelect"  name="lunsj">
                  <option value="0">No lunch</option>
                  <option value="30">30m lunch</option>
                  <option value="60">60m lunch</option>
                </select>
            </div>
        </div>
    </div>
</div>



<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <label class="control-label" for="kommentar">Comment:</label>

                <textarea class="form-control input" id="kommentar" name="kommentar"
                          placeholder="."
                          ></textarea>
        </div>
    </div>
</div>



<div class='row '>
    <div class='col-sm-12'>
        <div class="form-group">
            <label for="timearbeid">m,n,mn</label>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn">
                    <input type="radio"
                           value="1"
                           required ><i
                            class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Yes</span>
                </label>

                <label class="btn">
                    <input type="radio" class=""
                           value="0" >
                    <i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> No</span>
                </label>
            </div>
        </div>
    </div>
</div>

您将在上面的代码段中注意到，每一方仍有一些空间，这是由于使用了class='col-sm-12'和class='col-xs-4'。删除它也会使您与10.10.2017值输入字段对齐。

   

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal" role="form" method="post" action="mmm.php">

<div class='container-fluid' style="padding: 8px;">
<div class='row'>
    <div class='col-sm-12'>
        <div class="input-group form-group">
            <select id="ID" name="ID" class="form-control selectpicker"
                    data-live-search="true"
                    style="">
<option value='559'>(559)</option>

            </select>

            <span class="input-group-btn">
            <button id="GPS" class="btn btn-primary" type="button" onclick="loadCoordinates()">
                <span id="icon" class="glyphicon glyphicon-screenshot"></span></button>
            </span>

        </div>
    </div>
</div>


<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <label for="dato" class="">When:</label>
            <div class='input-group'>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                <input type='text'
                       value='10.10.2017'
                       name="dato"
                       class="form-control"
                       id="datoPicker"
                       readonly/>

            </div>
        </div>
    </div>
</div>

<div class='row'>
   
        <div class="form-group">
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    <input type='text'
                           value='07:00'
                           name="fraKlokken"
                           class="form-control fraTimepicker"
                           id="fraKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text'
                           value='15:00'
                           name="tilKlokken"
                           class="form-control tilTimepicker"
                           id="tilKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <select class="form-control" id="lunchSelect"  name="lunsj">
                  <option value="0">No lunch</option>
                  <option value="30">30m lunch</option>
                  <option value="60">60m lunch</option>
                </select>
            </div>
        </div>
   
</div>



<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <label class="control-label" for="kommentar">Comment:</label>

                <textarea class="form-control input" id="kommentar" name="kommentar"
                          placeholder="."
                          ></textarea>
        </div>
    </div>
</div>



<div class='row '>
    <div class='col-sm-12'>
        <div class="form-group">
            <label for="timearbeid">m,n,mn</label>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn">
                    <input type="radio"
                           value="1"
                           required ><i
                            class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Yes</span>
                </label>

                <label class="btn">
                    <input type="radio" class=""
                           value="0" >
                    <i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> No</span>
                </label>
            </div>
        </div>
    </div>
</div>

Answer 2

为什么将form-group类用于列？

只需删除它并更新下面的代码：

＆＃13;

.no-left-padding{
  padding-left: 0 !important;
}
.no-right-padding{
  padding-right: 0 !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal" role="form" method="post" action="mmm.php">
    <div class='container-fluid' style="padding: 8px;">
        <div class='row'>
            <div class='col-sm-12'>
                <div class="input-group">
                    <select id="ID" name="ID" class="form-control selectpicker" data-live-search="true" style="">
                        <option value='559'>(559)</option>
                    </select>
                    <span class="input-group-btn">
            <button id="GPS" class="btn btn-primary" type="button" onclick="loadCoordinates()">
                <span id="icon" class="glyphicon glyphicon-screenshot"></span></button>
                    </span>
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='col-sm-12'>
                <div class="form-group">
                    <label class='col-sm-12' for="dato" class="">When:</label>
                    <div class='col-sm-12'>
                    <div class='input-group'>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        <input type='text' value='10.10.2017' name="dato" class="form-control" id="datoPicker" readonly/>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='col-sm-12'>
                <div class="form-group">
                    <div class="col-xs-4 no-right-padding">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                            <input type='text' value='07:00' name="fraKlokken" class="form-control fraTimepicker" id="fraKlokkenPicker" readonly>
                        </div>
                    </div>
                    <div class="col-xs-4 no-left-padding">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                            <input type='text' value='15:00' name="tilKlokken" class="form-control tilTimepicker" id="tilKlokkenPicker" readonly>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <select class="form-control" id="lunchSelect" name="lunsj">
                            <option value="0">No lunch</option>
                            <option value="30">30m lunch</option>
                            <option value="60">60m lunch</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='col-sm-12'>
                <div class="form-group">
                    <label class="col-sm-12" for="kommentar">Comment:</label>
                    <div class="col-sm-12">
                      <textarea class="form-control input" id="kommentar" name="kommentar" placeholder="."></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='col-sm-12'>
                <div class="form-group">
                    <label class="col-sm-12" for="timearbeid">m,n,mn</label>
                    <div class="col-sm-12">
                      <div class="btn-group" data-toggle="buttons">
                          <label class="btn">
                              <input type="radio" value="1" required><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Yes</span>
                          </label>
                          <label class="btn">
                              <input type="radio" class="" value="0">
                              <i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> No</span>
                          </label>
                      </div>
                    </div>
                </div>
            </div>
        </div>

＆＃13;

Answer 3

我会阅读本节http://bootstrapdocs.com/v3.0.3/docs/css/#forms-horizontal

上的文档

布局如此陈述......

<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>

您的代码已经写成......

<div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text' value='15:00' name="tilKlokken" class="form-control tilTimepicker" readonly>
                </div>
            </div>

在给出正确的布局和课程之后，你应该很高兴。

Answer 4

在此部分中，您有<div class='col-xs-4 form-group'>包含<div class='col-sm-12'>：

<div class='row'>
    <div class='col-sm-12'> 
        <div class="form-group">
            <div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    <input type='text'
                           value='07:00'
                           name="fraKlokken"
                           class="form-control fraTimepicker"
                           id="fraKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text'
                           value='15:00'
                           name="tilKlokken"
                           class="form-control tilTimepicker"
                           id="tilKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <select class="form-control" id="lunchSelect"  name="lunsj">
                  <option value="0">No lunch</option>
                  <option value="30">30m lunch</option>
                  <option value="60">60m lunch</option>
                </select>
            </div>
        </div>
    </div>
</div>

我尝试删除<div class='col-sm-12'>。这是一个例子：

<div class='row'>
      <!--<div class='col-sm-12'> REMOVE -->
        <div class="form-group">
            <div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    <input type='text'
                           value='07:00'
                           name="fraKlokken"
                           class="form-control fraTimepicker"
                           id="fraKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text'
                           value='15:00'
                           name="tilKlokken"
                           class="form-control tilTimepicker"
                           id="tilKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <select class="form-control" id="lunchSelect"  name="lunsj">
                  <option value="0">No lunch</option>
                  <option value="30">30m lunch</option>
                  <option value="60">60m lunch</option>
                </select>
            </div>
        </div>
<!--</div> REMOVE -->
</div>

这是一个小提琴：https://jsfiddle.net/vy12eLxa/

内联输入元素不使用整个宽度

4 个答案: