Question

以下设计在photoshop中使用12 grid system进行：

我尝试使用bootstrap为class='col-md-3'创建每个input但是，当我这样做时，它们会相互显示，但是当我添加margin时1}}每行只显示3 divs。难道我做错了什么？我以为bootstrap自动为col添加了边距。

    <div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Bleeding Love">Bleeding Love</div>
<div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Better in Time">Better in Time</div>
<div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Angel">Angel</div>
<div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="I Will Be">I Will Be</div>

Answer 1

Bootstrap有一个班级＆＃39;行＆＃39;您可以用来定义行。当您的列被连续包裹时，会应用一些边距。

来自Bootstrap的

CSS：

getLength() {
  BOOKLENGTH=1
  until [ ! -d "page-$((BOOKLENGTH+1))"  ]; do
    BOOKLENGTH=$((BOOKLENGTH+1))
  done
}

length() {
  if [ -d manuscript/ ] ; then
    (cd manuscript || exit; getLength; echo "Book length is: ${BOOKLENGTH} pages.")
  else 
    echo "Manuscript not found, probably not in project root!"
  fi
}

像你这样欺骗你的div：

.row {
    margin-right: -15px;
    margin-left: -15px;
}

根据您应用的保证金数量，列可能并非全部适合您的行。对容器及其行为的处理方式也可能有所帮助。

我会评论，但我还没有足够的声誉。

Answer 2

您可以使用Inline checkboxes and radios并在列中添加另一个类以用于任何样式。

＆＃13;

.songs {
  background: #eee;
  padding: 20px;
  margin: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" name="chk_spirit" value="Bleeding Love">Bleeding Love</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox2" name="chk_spirit" value="Better in Time">Better in Time</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox3" name="chk_spirit" value="Angel">Angel</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox4" name="chk_spirit" value="The First Time Ever I saw Your Face">The First Time Ever I saw Your Face</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox5" name="chk_spirit" value="Whatever it Takes">Whatever it Takes</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox6" name="chk_spirit" value="The Best You never Had">The Best You never Had</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox7" name="chk_spirit" value="I Will Be">I Will Be</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox8" name="chk_spirit" value="Homeless">Homeless</label>
      </div>
    </div>
  </div>
</div>

＆＃13;

col-md-3显示不正确

2 个答案: