Question

我有一个HTML，其中的div具有多个输入（带有占位符）。由于某种原因，占位符无法正确显示。此外，需要将2个输入按钮（文本）彼此相邻放置。

这是jsfiddle。

HTML

<div class="container">

      <div class="row row-bordered voffset4">
          <div class="col-md-12">
            <label class="radio-inline"><input type="radio" name="optradio">Aisles</label>
            <label class="radio-inline"><input type="radio" name="optradio">Poses</label>
            <label class="radio-inline"><input type="radio" name="optradio">Exclusion Zones</label>
          </div>
      </div>

      <div class="row row-bordered">
          <div class="col-md-4">
              <button type="button" class="btn" id="add-aisle">Add</button>
              <div id="aisle-coordinate-container">
                    <div class="col-md-1"> <input type="text" class="form-control" id="inputKey" placeholder="X"> </div>
                    <div class="col-md-1"> <input type="text" class="form-control" id="inputValue" placeholder="Value"> </div>
              </div>
          </div>
          <div class="col-md-8">
              <canvas id="myCanvas"></canvas>
          </div>
      </div>

      <!--<div class="row">-->
         <!--<img src="/static/images/lena.png" alt="Italian Trulli">-->
      <!--</div>-->

  </div>

CSS

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";

.row-bordered:after {
  content: "";
  display: block;
  border-bottom: 5px solid #ccc;
  margin: 0 25px;
}

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

Answer 1

<div class="row row-bordered">
      <div class="col-md-4">
          <button type="button" class="btn" id="add-aisle">Add</button>
      </div>
  </div>
  <div class="row">
          <div id="coordinate-container">
                <div class="col-md-3 col-sm-3"> <input type="text" class="form-control" id="inputKey" placeholder="X"> </div>   
                <div class="col-md-3 col-sm-3"> <input type="text" class="form-control" id="inputValue" placeholder="Value"> </div>
          </div>
      </div>
      <div class="col-md-8">
          <canvas id="myCanvas"></canvas>
      </div>
  </div>

这就是您想要的样子吗？我很难想象您想要什么。您是否要在同一行或下一行添加按钮和输入？

编辑：将按钮更改为另一行。如果您希望将其放在另一行，则无需将其放在同一行。

Answer 2

这不是代码问题，而是更多如何使用引导网格。您的父容器具有col-md-4，但带有输入框的div的col-md-1仅显示宽度的1/4，因此它被压缩了。如果删除col-md-1类，它将正确显示。

快速建议：如果要使用col-md-x类，可以将row类添加到<div id="coordinate-container">

Answer 3

尝试一下：

<div class="row row-bordered">
    <div class="col-md-4">
        <div class="col-xs-12">
            <button type="button" class="btn col-xs-2" id="add-aisle">Add</button>
        </div>
        <div id="aisle-coordinate-container">
            <div class="col-sm-6">
                <input type="text" class="form-control" id="inputKey" placeholder="X">
            </div>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="inputValue" placeholder="Value">
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <canvas id="myCanvas"></canvas>
    </div>
</div>

Fiddle中的对齐方式存在一些问题。我已经在浏览器中对此进行了测试，输入元素现在位于一行中，并且占位符正确可见。

引导占位符不适用于输入类型

3 个答案: