Question

是否有可能以及如何将输入字段旋转90度？我无法在互联网上找到任何相关信息。也许使用错误的关键字？

旧情况

通缉情况

                echo'<table class="table table-striped table-fixed">
                      <thead>
                        <tr>
                          <th class="col-md-5">
                          <small>Firma</small>
                          <a href="?zoek='.$zoek.'&sort_name=klantnaam&sort=asc" title="'.$lang['sorteer_asc'].'"><span class="glyphicon glyphicon-sort-by-alphabet glyph_sorting" aria-hidden="true"></span></a>
                          <a href="?zoek='.$zoek.'&sort_name=klantnaam&sort=desc" title="'.$lang['sorteer_asc'].'"><span class="glyphicon glyphicon-sort-by-alphabet-alt glyph_sorting" aria-hidden="true"></span></a>
                          </th>
                          <th class="col-md-2"><small>Plaats</small></th>
                          <th class="col-md-2"><small>Telefoon</small></th>
                          <th class="col-md-3">
                              <form action="" method="post">
                                <div class="form-group col-xs-8">
                                  <input type="text" class="form-control input-sm" placeholder="Zoeken op" name="zoek_nieuw" value="'.$zoek.'">
                                </div>
                                  <button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                                  <button type="button" class="btn btn-sm"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                              </form>
                          </th>
                        </tr>
                      </thead>
                      <tbody>';

                  while ($row = mysqli_fetch_array($res)) { $i++; echo'
                        <tr>
                          <td><small>'.$row['klantnaam'].'</small></td>
                          <td><small>'.$row['plaats']; if($row['land_code'] != 'nl') { echo ' <span class="flag"><img src="images/flags/'.$row['land_code'].'.gif"></span>'; } echo '</small></td>
                          <td><small>'.$row['tel'].'</small></td>
                          <td align="right">'; if(!empty($row['www'])) { echo '<a href="'.$row['www'].'" target="_blank"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> </a>'; } else { echo '<span class="glyphicon glyphicon-none" aria-hidden="true"></span> '; }
                          echo '<a href="http://maps.google.com/?q='.$row['klantnaam'].'+'.$row['plaats'].'" target="_blank"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></a>
                          <a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
                          <a href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                          <a href="#"><span class="glyphicon glyphicon-stats" aria-hidden="true" data-toggle="modal" data-target=".bd-example-modal-lg'.$i.'"></span></a>
                          </td>
                        </tr>';
}

Answer 1

您可以使用CSS旋转字段：

input[type="text"]{
    transform: rotate(90deg); 
    position:absolute;
    top: 80px;
    border: thin solid #000;
}

<input type="text" placeholder="test">

Answer 2

.group-control {
  position:relative;
  transform:rotate(90deg);
  width:150px;
  height:500px;
  top: -147px;
  left: -264px;;
}
.form-control {
  position:relative:
  top:10px;
  left:10px;
  }
}

<div class="group-control">
					<input class="form-control" name="test" type="text" placeholder="test input">
				</div>

这是做这件事的小提琴 https://jsfiddle.net/f10y2a9z/

Bootstrap输入字段旋转

2 个答案: