引导输入如何边界折叠？

时间：2018-07-17 08:31:13

标签： html css twitter-bootstrap-3

作为标题，

我试图创建一个输入块，每个输入都将彼此相邻，呈表格状，如下图所示。

stacked input

上面的代码是

<div class="row">
    <div class="col-xs-12 padding-sides-none">
            <div class="col-xs-3 padding-sides-none">
                <select class="form-control selectpicker">
                </select>
            </div>
            <div class="col-xs-3 padding-sides-none">
                <select class="form-control selectpicker"></select>
            </div>
            <div class="col-xs-3 padding-sides-none">
                <select class="form-control selectpicker"></select>
            </div>
            <div class="col-xs-3 padding-sides-none">
                <input class="form-control" /> 
            </div>
        </div>
        <div class="col-xs-12 padding-sides-none">
            <div class="col-xs-2 padding-sides-none">
                <div class='input-group date' style="width:100%;">
                    <input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <div class="col-xs-2 padding-sides-none">
                <div class='input-group date' style="width:100%;">
                    <input type='text' class="form-control" data-date-    format="DD.MM.YYYY" style="width:100%;" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div> 
            </div>
            <div class="col-xs-2 padding-sides-none">
                <div class='input-group date' style="width:100%;">
                    <input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <div class="col-xs-6 padding-sides-none">
               <input class="form-control"></input>
            </div>
        </div>
    </div>

Select正在使用bootstrap-select，而datepicker使用bootstrap-datetimepicker，并正在使用Bootstrap 3.3.0。

问题是输入边框，当每个输入在彼此的一侧时，边框看起来更粗。接触其他输入的边框较粗。

我希望每个输入的触摸边都采用边框折叠样式，就像表格的边框折叠一样，其中每个边框的边都具有相同的厚度，但是我似乎无法正确完成它。

我该如何实现？

2 个答案:

答案 0 :(得分：1)

i resolved your problem
please check below code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<style>
    .formSection .nopadding {padding: 0;}
    .formSection .form-control {border-radius: 0;}
    .formSection select.form-control {border-bottom: 0;border-right: 0;}
    .formSection .col-xs-3 input.form-control {border-bottom: 0;}
    .formSection .input-group-addon {min-width: 36px;border-right: 0; border-radius: 0;}
    .formSection .input-group {display: flex;}
</style>
<div class="formSection">
<div class="container-fluid">
<div class="row">
    <div class="col-xs-12 padding-sides-none">
            <div class="col-xs-3 nopadding">
                <select class="form-control selectpicker">
                </select>
            </div>
            <div class="col-xs-3 nopadding">
                <select class="form-control selectpicker"></select>
            </div>
            <div class="col-xs-3 nopadding">
                <select class="form-control selectpicker"></select>
            </div>
            <div class="col-xs-3 nopadding">
                <input class="form-control" /> 
            </div>
        </div>
        <div class="col-xs-12 padding-sides-none">
            <div class="col-xs-2 nopadding">
                <div class='input-group date' style="width:100%;">
                    <input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <div class="col-xs-2 nopadding">
                <div class='input-group date' style="width:100%;">
                    <input type='text' class="form-control" data-date-    format="DD.MM.YYYY" style="width:100%;" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div> 
            </div>
            <div class="col-xs-2 nopadding">
                <div class='input-group date' style="width:100%;">
                    <input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <div class="col-xs-6 nopadding">
               <input class="form-control"></input>
            </div>
        </div>
    </div>
    </div>
    </div>
</body>
</html>

答案 1 :(得分：1)

只需对代码进行一些小的修改，并通过一些CSS即可获得预期的结果，请检查以下工作示例：

注意：选择框appearance设置为无，以清除浏览器提供的默认ui。

.row.compact-row {
  margin-right: 0;
  margin-left: 0;
}
.row.compact-row > [class^="col-"],
.row.compact-row > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
  margin: -1px 0 0 -1px;
}
.compact-row .input-group-addon {
  border-radius: 0;
}
.compact-row .form-control {
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<br/><br/>
<div class="container">
  <div class="row compact-row">
    <div class="col-xs-3">
      <select class="form-control selectpicker">
        <option value="">Option 1</option>
        <option value="">Option 2</option>
      </select>
    </div>
    <div class="col-xs-3">
      <select class="form-control selectpicker">
        <option value="">Option 1</option>
        <option value="">Option 2</option>
      </select>
    </div>
    <div class="col-xs-3">
      <select class="form-control selectpicker">
        <option value="">Option 1</option>
        <option value="">Option 2</option>
      </select>
    </div>
    <div class="col-xs-3">
      <input class="form-control" />
    </div>
    <div class="col-xs-2">
      <div class="input-group date">
        <input type="text" class="form-control" data-date-format="DD.MM.YYYY" />
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
    <div class="col-xs-2">
      <div class="input-group date">
        <input type="text" class="form-control" data-date- format="DD.MM.YYYY" />
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
    <div class="col-xs-2">
      <div class="input-group date">
        <input type="text" class="form-control" data-date-format="DD.MM.YYYY" />
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
    <div class="col-xs-6">
      <input class="form-control" type="text" />
    </div>
  </div>
</div>

相关问题
最新问题