Question

我需要在一行中显示复选框和txtMonth。

我使用bootstrap 3。

这是我的HTML：

<div class="row">
    <div class="col-md-6">
        <div class="col-md-1 col-xs-1 col-sm-1"><label for="txtMonth">month:</label></div>
        <div class="col-md-1 col-xs-1 col-sm-1" style="padding:0!important;margin:0!important;">
            <input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" min="1" max="12" />
            <input type="checkbox" value="">
        </div>

        <div class="col-md-1 col-xs-1 col-sm-1 "><label for="txtYear">year:</label></div>
        <div class="col-md-2 col-xs-2 col-sm-2" style="padding:0!important;margin:0!important;">
            <input type="number" class="form-control input-sm" id="txtYear" ng-model="year" min="1990" max="2030" />
        </div>

        <div class="col-md-1 col-xs-1 col-sm-1">
            <input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="ok" />
        </div>
    </div>

    <div class="col-md-3 pull-left">
        <div class="btn-group">
            <button type="button" title="loadfile" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">
                <span class="glyphicon glyphicon-open"></span> excel
            </button>
            <download-excelto-client month="month" year="year"></download-excelto-client>
        </div>
    </div>
</div>

视图中的复选框总是在月份标签下面。

这是JSFiddle。

如何使复选框与月份文本框在一行中？

Answer 1

在自己的col内使用它，不要忘记容器。您也可以简化代码，因为您不需要指定col-md-1 col-xs-1 col-sm-1，只有col-xs-1就足够了：

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

body {
  margin: 10px;
}

.no-p-m {
  padding: 0!important;
  margin: 0!important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="well well-sm">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="col-xs-1"><label for="txtMonth">month:</label></div>
        <div class="col-xs-2 no-p-m">
          <input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" min="1" max="12" />
        </div>
        <div class="col-xs-1">
          <input type="checkbox" value="">
        </div>

        <div class="col-xs-1"><label for="txtYear">year:</label></div>
        <div class="col-xs-2 no-p-m">
          <input type="number" class="form-control input-sm" id="txtYear" ng-model="year" min="1990" max="2030" />
        </div>

        <div class="col-xs-1">
          <input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="ok" />
        </div>
      </div>

      <div class="col-md-3 pull-left">
        <div class="btn-group">
          <button type="button" title="loadfile" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">
                    <span class="glyphicon glyphicon-open"></span> excel
                </button>
          <download-excelto-client month="month" year="year"></download-excelto-client>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

如果你想安排输入内联使用form-inline类的bootstrap

 <div class="form-inline">
       <div class="form-group">
           .....................
      </div>
 <div>

在此div中写入输入元素。

Answer 3

您的#txtMonth字段显示为一个块，因此它使其所有后续兄弟姐妹至少出现在下一行。加上它的宽度设置为占用可用空间的100％！所以这是应该解决的问题。

由于月份输入字段应该只显示两位数的填充整数01到12（我猜），它不需要占用整个空间。您可以根据 Bootstrap 断点值使其宽度变化。

输入将显示为内联元素（内联块），您可能必须修复垂直对齐行为（这取决于周围的上下文）。鉴于您的标记，使用vertical-align: top似乎是可以接受的。

以上所有内容都引导我遵循以下css规则。

#txtMonth {
  display: inline-block; max-width: 75%; vertical-align:top; margin-left: 5px;
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 970px) {
  #txtMonth {display: inline-block;max-width: 85%}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1170px) {
 #txtMonth {display: inline-block;max-width: 90%}
}

/* You may or may not want the checkbox to appear on the right of the "cell" (available space) */
#txtMonth + input {float: right}

forms are implemented in a inline context时还有一个form-inline类。但随着空间缩小，输入将被包裹到下一行。

我需要在单行

3 个答案: