堆栈内存溢出
  繁体   English   中英

如何为bootstrap输入边界崩溃？

[英]How to border-collapse for bootstrap inputs?

 原文  2018-07-17 08:31:12  4   2    html/ css/ twitter-bootstrap-3

问题描述

如题，

我尝试创建一个输入块，其中每个输入将彼此相邻，类似于表格式，如下图所示。

堆叠输入

上面的代码是 

<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 个解决方案

解决方案1
 2 已采纳  2018-07-17 09:15:53

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>

解决方案2
 1  2018-07-17 11:53:00

只需对您的代码进行少量修改，并使用一些CSS即可获得预期结果，请查看下面的工作示例：

注意：select-box appearance设置为none以清除浏览器提供的默认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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 border-collapse 中显示边框？ 如何突出显示边框折叠折叠的表格单元格的4个边框 css border-collapse不适用 表边界折叠问题 表中的边框折叠不起作用 边境崩溃不再起作用 如何更改特定表格行的表格边框折叠属性？ border-collapse:collapse 和 transform:translate 的组合 使用border-collapse更改表格的宽度： 如何使用表格中的 css “border-collapse:collapse”样式修复边框优先级
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM