Я хочу включить флажок в раскрывающееся меню Twitter Bootstrap, но я не могу поместить текст меню (в ‹a> .. ‹/a>) рядом с флажком. Я читал о CSS, используемом для форм, и пробовал множество вещей, но безрезультатно.
Это то, что я думаю, должно работать, но не работает.
<li><label class="checkbox" ><input type="checkbox">aaa</label><a href="#" style="float:left"></a></li>
Невилл
Попробуйте этим способом Но есть некоторые проблема
dropdown-menu-form к родительскому <ul>, и он отлично работает.
- person kentcdodds; 01.03.2013
Строка javascript для решения проблемы в ответе Олега: http://jsfiddle.net/Wsc9r/
Оберните ваш флажок в A-tag следующим образом:
<li>
<a>
<label>
<input type="checkbox">
Some text
</label>
</a>
</li>
Также вы можете добавить эти правила CSS
.dropdown-menu input {margin-top: -4px;}
.dropdown-menu label {margin: 0;}
<a> я добавил .checkbox, но переопределил margin-top и margin-bottom, чтобы сделать интервалы более естественными. Например: <a class="checkbox" style="margin-top: 5px; margin-bottom: 5px>checkbox labels and inputs</a>. Возможно, это похоже на правила CSS, опубликованные в ответе.
- person Mark Mikofski; 19.02.2015
Попробуйте этот плагин jquery для начальной загрузки: https://github.com/davidstutz/bootstrap-multiselect
Heare - хороший тому пример: https://codepen.io/bseth99/pen/fboKH
И послушайте код:
var options = [];
$('.dropdown-menu a').on('click', function(event) {
var $target = $(event.currentTarget),
val = $target.attr('data-value'),
$inp = $target.find('input'),
idx;
if ((idx = options.indexOf(val)) > -1) {
options.splice(idx, 1);
setTimeout(function() {
$inp.prop('checked', false)
}, 0);
} else {
options.push(val);
setTimeout(function() {
$inp.prop('checked', true)
}, 0);
}
$(event.target).blur();
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<br/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="button-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox" /> Option 1</a>
</li>
<li>
<a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox" /> Option 2</a>
</li>
<li>
<a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox" /> Option 3</a>
</li>
<li>
<a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox" /> Option 4</a>
</li>
<li>
<a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox" /> Option 5</a>
</li>
<li>
<a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox" /> Option 6</a>
</li>
</ul>
</div>
</div>
</div>
</div>