Question

我有一个使用bootstrap 3 div创建的网格。 div的集合有1个按钮，后面是一个单选按钮，后面是另一个按钮。我想用背景颜色突出这些。背景颜色不应该介于两者之间，应该像一行。

以下是我尝试的小提琴 - https://jsfiddle.net/oxfqvtds/2/

在这里，div的右下方有一些空白区域。结果，突出显示不一致。

＆＃13;

.highlight {
  background-color: yellow;
}

.input-field {
  height: 20px;
  padding: 2px 10px;
}

.custom-label {
  line-height: 3.3em !important;
}

.label-size {
  font-size: 10px;
  line-height: 2.1em;
}

label {
  padding-right: 0px;
}

＆＃13;

<head>
  <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
  <div class="container-fluid">

    <form class="form-horizontal">
      <div class="col-md-12">...</div>
      <div class="col-md-12">...</div> 
      <div class="col-md-10  highlight">
        <div class="form-group">
          <div class="col-md-3">
            <button class="btn btn-primary btn-xs" type="button">Test</button>

          </div>

          <label class="col-md-2 label-size">Options</label>

          <div class="radio" class="col-md-7 label-size">
            <label class="label-size">
            <input type="radio" name="opt" value="opt" >opt</label>

          </div>
        </div>
      </div>
      <div class="col-md-2 highlight form-group">

        <button class="btn btn-info btn-xs pull-right">Test2</button>

      </div>
    </form>
  </div>
</body>

＆＃13;

此外，希望按钮/单选按钮位于突出显示区域的中心位置。现在，它们似乎是突出显示区域的顶部。

Answer 1

使用bootstrap，您的列应该在一行中。准备好后，将背景颜色应用于该行。删除表单组，并且您在class元素周围列出了两次类，因此它没有读取引导列类。

.highlight.row {
  background-color: yellow;  
  margin:0;
}

.input-field {
  height: 20px;
  padding: 2px 10px;
}

.custom-label {
  line-height: 3.3em !important;
}

.label-size {
  font-size: 10px;
  line-height: 2.1em;
}

label {
  padding-right: 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row highlight">
  <form class="form-horizontal">

    <div class="col-md-10  ">
      <div class="">
        <div class="col-md-3">
          <button class="btn btn-primary btn-xs" type="button">Test</button>

        </div>
        <div class="col-md-2">
        <label class="label-size">Options</label>
        </div>
        
        

        <div class="col-md-5 label-size">
          <label class="label-size">
            <input type="radio" name="opt" value="opt" >opt</label>

        </div>
      </div>
    </div>
    <div class="col-md-2">

      <button class="btn btn-info btn-xs pull-right">Test2</button>

    </div>
  </form>
  </div>
</div>

Answer 2

从此特定margin-bottom

中删除form-group

设置div的背景颜色

2 个答案: