自适应固定入口组 Select2 和表格管理的另一个元素或 input-group-btn
我正在尝试完成文件加载系统的设计：
系统具有初始 Select2; 然后它与搜索按钮相结合 /搜索文件/; 然后我们有输入文本，我显示文件名; 之后我需要 3 按钮：一个预览，另一个允许我添加更多字符串，还有一个，允许我删除它们。
但我不能让它看起来像 col-sm-12, 怎么样 col-sm-6
检查输入文本是否仅在中间读取; 它有 80% C，但我需要它来过滤中间行中的所有空间。
系统具有初始 Select2; 然后它与搜索按钮相结合 /搜索文件/; 然后我们有输入文本，我显示文件名; 之后我需要 3 按钮：一个预览，另一个允许我添加更多字符串，还有一个，允许我删除它们。
但我不能让它看起来像 col-sm-12, 怎么样 col-sm-6
$/".select2"/.select2/{
theme: "bootstrap",
placeholder: "Buscar y Selecionar",
allowClear: true,
}/;.btn-file {
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100px;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha/opacity=0/;
opacity: 0;
background: red;
cursor: inherit;
display: block;
}
.btn-file input[readonly] {
background-color: white !important;
cursor: text !important;
}
.obj-file {
width: 98% !important;
height: 100% !important;
min-height: calc/100vh - 200px/ !important;
overflow: auto !important;
}
.text-file {
float: right !important;
width: 60% !important;
}<link href="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"]https://maxcdn.bootstrapcdn.co ... ot%3B[/url] rel="stylesheet"/>
<link href="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"]https://maxcdn.bootstrapcdn.co ... ot%3B[/url] rel="stylesheet"/>
<link href="[url=https://use.fontawesome.com/releases/v5.0.13/css/all.css"]https://use.fontawesome.com/re ... ot%3B[/url] rel="stylesheet"/>
<link href="[url=https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css"]https://cdnjs.cloudflare.com/a ... ot%3B[/url] rel="stylesheet"/>
<link href="[url=https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.9/select2-bootstrap.css"]https://cdnjs.cloudflare.com/a ... ot%3B[/url] rel="stylesheet"/>
<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]
<script src="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>]https://maxcdn.bootstrapcdn.co ... gt%3B[/url]
<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>]https://cdnjs.cloudflare.com/a ... gt%3B[/url]
<div class="form-group">
<div class="col-sm-6">
<div class="input-group select2-bootstrap-append">
<div class="input-group-btn">
<select class="form-control select2">
<option>Selec.</option>
<option>Prueba 2 max with</option>
<option>Prueba 3</option>
<option>Prueba 4</option>
<option>Prueba 5</option>
</select>
<span class="btn btn-primary btn-file">Buscar <i class="fas fa-file-alt"></i><input accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="i_file_1" name="i_file_1" required="" type="file"/></span>
</div>
<input class="form-control text-file" name="text_file_1" readonly="" type="text"/>
<div class="input-group-btn">
<span class="btn btn-info btn-disabled view-doc btn-view" data-target="#modal-info-i_file_1" data-toggle="modal" disabled="">Vista Previa</span>
<span class="btn btn-info"><i class="fas fa-plus-square"></i></span>
<span class="btn btn-info"><i class="fas fa-minus-square"></i></span>
</div>
</div>
</div>
</div>
检查输入文本是否仅在中间读取; 它有 80% C，但我需要它来过滤中间行中的所有空间。
没有找到相关结果
已邀请:
2 个回复
君笑尘
赞同来自:
.select2-container {position:absolute;
}
裸奔
赞同来自:
在 BS 3.X
:
$/".select2"/.select2/{theme: "bootstrap",
placeholder: "Buscar y Selecionar",
width: 'auto',
dropdownAutoWidth: true,
allowClear: true,
}/;
.btn-file {
overflow: hidden;
border-radius: 0 !important;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100px;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha/opacity=0/;
opacity: 0;
background: red;
cursor: inherit;
display: block;
}
.btn-file input[readonly] {
background-color: white !important;
cursor: text !important;
}
.text-file {
float: right !important;
width: 100% !important;
}
在 BS 4.X:
用于动态初始化的自定义脚本 select2
$/'select'/.each/function // {$/this/.off/'change'/;
$/this/.select2/{
theme: 'bootstrap4',
placeholder: "Buscar y Selecionar",
width: 'auto',
dropdownAutoWidth: true,
}/;
}/;
.select2-container--bootstrap4 .select2-selection--single{height:calc/2.25rem + 2px/!important}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#757575;line-height:2.25rem}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{position:absolute;top:50%;right:3px;width:20px}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{top:60%;border-color:#343a40 transparent transparent;border-style:solid;border-width:5px 4px 0;width:0;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{line-height:2.25rem}.select2-search--dropdown .select2-search__field{border:1px solid #ced4da;border-radius:.25rem}.select2-results__message{color:#6c757d}.select2-container--bootstrap4 .select2-selection--multiple{min-height:calc/2.25rem + 2px/!important;height:calc/2.25rem + 2px/!important}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{color:#343a40;border:1px solid #bdc6d0;border-radius:.2rem;padding:0;padding-right:5px;cursor:pointer;float:left;margin-top:.3em;margin-right:5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{color:#bdc6d0;font-weight:700;margin-left:3px;margin-right:1px;padding-right:3px;padding-left:3px;float:left}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:#343a40}.select2-container :focus{outline:0}.select2-container--bootstrap4 .select2-selection{border:1px solid #ced4da;border-radius:.25rem;width:100%}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#17a2b8;-webkit-box-shadow:0 0 0 .2rem rgba/0,123,255,.25/;box-shadow:0 0 0 .2rem rgba/0,123,255,.25/}.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}select.is-invalid~.select2-container--bootstrap4 .select2-selection{border-color:#dc3545}select.is-valid~.select2-container--bootstrap4 .select2-selection{border-color:#28a745}.select2-container--bootstrap4 .select2-dropdown{border-color:#ced4da;border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true]{background-color:#e9ecef}.select2-container--bootstrap4 .select2-results__option--highlighted,.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true]{background-color:#007bff;color:#f8f9fa}.select2-container--bootstrap4 .select2-results__option[role=group]{padding:0}.select2-container--bootstrap4 .select2-results__group{padding:6px;display:list-item;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{width:1.2em;height:1.2em;line-height:1.15em;padding-left:.3em;margin-top:.5em;border-radius:100%;background-color:#6c757d;color:#f8f9fa;float:right;margin-right:.3em}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#343a40}/*fileupload*/.select-file{
display: none !important;
}
.btn-file input[readonly] {
background-color: white !important;
cursor: text !important;
}
.custom-file-label {
width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.custom-file-label{
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.obj-file {
width: 98% !important;
height: 100% !important;
min-height: calc/95vh - 200px/ !important;
overflow: auto !important;
}
/*Fix Select2 Container*/
.select2-bootstrap4-prepend >
.select2-container > .selection > .select2-selection--single {
border-radius: .25rem 0 0 .25rem !important;
}
.select2-bootstrap4-append >
.select2-container > .selection > .select2-selection--single {
border-radius: 0 .25rem .25rem 0 !important;
}
工作 add, remove file event 与我联系。