Bootstrap设计思想

Question

我想从你们那里得到一个想法。我有3个复选框，我想在框内的每一行显示一个复选框，有点像文本区。有什么Bootstrap工具可以让我做到这一点呢？

我试图创建一个文本区域并在其中取消复选框，但代码被翻译为文本区域中的文本。所以我不能这么做。做这个的方法是什么？

Answer 1

在创建站点时，您不应该限制自己只使用Bootstrap元素。Bootstrap只是一个漂亮元素的集合；您也可以(而且可能有必要)创建自己的元素。

如果你只想把你的复选框放在一个带有大纲的框中，那么对于一个相应的Bootstrap元素来说，这就有点太简单了。

在最简单的表单中，它的超文本标记语言和层叠样式表看起来像this JSFiddle.

Html

<div class='checkbox-container'>
  <input type='checkbox' id='one'>
  <label for='one'>Hello</label>
</div>

Css

.checkbox-container {
  margin: 10px 0;
  padding: 10px 0;
  border: 1px solid #aaa;
}

如果你想把所有的复选框放在一个框中，那么你只需要更多的代码就可以做到。View on JSFiddle.

如果出于某种奇怪的原因，您必须只使用use Bootstrap元素，ananda的答案非常好。使用well元素不仅提供了边框，还提供了内部阴影和背景色。

Answer 2

试着把它们放在'well‘元素中