时间戳

首页 > 解决方案 > 引导占位符不适用于输入类型

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

问题描述

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

这是jsfiddle。

http://jsfiddle.net/o2qt6910/

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;
}

标签： htmlcsstwitter-bootstrap

解决方案

<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>

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

编辑：将按钮更改为位于另一行。如果您希望它位于另一行，则无需位于同一行。

推荐阅读