Bootstrap网格内的输入不起作用

时间：2017-07-06 06:47:08

标签： twitter-bootstrap

我一直在玩Bootstrap网格，我的目标是制作这个屏幕：

enter image description here

我使用4-8比例，所以表是8，搜索选项是4。 我不知道为什么但搜索行没有响应鼠标（因为它们上面有东西） - 但如果我使用标签按钮导航到它们，它会做出响应。

这部分的代码是：

<span class="row">
			<span class="col-sm-4"> <!-- The Search Options -->
				<!-- ============================================================================================== -->
				<!-- Search by Date --> 
				<!-- ============================================================================================== -->
				<span class="row">
 					<span class="col-sm-12">
						Search by Date: <input type="date" ng-model="b.AllsearchDate">
						<button ng-click="b.AllsearchByDate()">
							<img alt="Search" src="../Ico/search.png" height="19px">
						</button> <br /> <br /> 
 					</span>
 				</span>
				<!-- ============================================================================================== -->
				<!-- Search by Price --> 
				<!-- ============================================================================================== -->
				<span class="row">
  					<a class="col-sm-12">
						Search by Price: <input ng-model="b.AllsearchPrice"
						placeholder="Input max price...." type="number"/>
						<button ng-click="b.AllsearchByPrice()">
							<img alt="Search" src="../Ico/search.png" height="19px">
						</button> <br /> <br /> 
					</a>
 				</span>
				<!-- ============================================================================================== -->
				<!-- Search by Category --> 
				<!-- ============================================================================================== -->
				<span class="row">
					<span class="col-sm-12">
						Search by Type: &nbsp <select ng-model="b.AllsearchType">
							<option value="" disabled selected>Select a Type</option>
							<option value="FOOD">Food</option>
							<option value="ELECTRICTY">Electricity</option>
							<option value="RESTAURANTS">Restaurants</option>
							<option value="HEALTH">Health</option>
							<option value="SPORTS">Sports</option>
							<option value="CAMPING">Camping</option>
							<option value="TRAVELLING">Traveling</option>
						</select>
				
						<button ng-click="b.AllsearchByType()">
							<img alt="Search" src="../Ico/search.png" height="19px">
						</button> <br /> <br />
					</span>
				</span>
				<!-- ============================================================================================== -->
			</span> <!-- col-sm-4 -->
		<!-- ================================================================================== -->
		<!-- All Coupons table --> 
		<!-- ================================================================================== -->
		<table border="1" class="col-sm-8">
			<tr>
				<th ng-click="b.orderBy('id')">ID</th>
				<th ng-click="b.orderBy('title')">Title</th>
				<th ng-click="b.orderBy('start_date')">Start Date</th>
				<th ng-click="b.orderBy('end_date')">End date</th>
				<th ng-click="b.orderBy('amount')">Amount</th>
				<th ng-click="b.orderBy('type')">Type</th>
				<th ng-click="b.orderBy('message')">Message</th>
				<th ng-click="b.orderBy('price')">Price</th>
				<th ng-click="b.orderBy('image')">Image</th>
				<th>Actions</th>
			</tr>
			<tr ng-repeat="c1 in b.allCoupons | orderBy: b.order : b.goUp">
				<td>{{c1.id}}</td>
				<td>{{c1.title}}</td>
				<td>{{c1.start_date}}</td>
				<td>{{c1.end_date}}</td>
				<td>{{c1.amount}}</td>
				<td>{{c1.type}}</td>
				<td>{{c1.message}}</td>
				<td>{{c1.price}}$</td>
				<td><img alt="" src={{c1.image}} width="100px" height="100px"></td>
				<td>
					<button ng-click="b.buy(c1)">
						<img alt="Buy" src="../Ico/buy.png" width="60px" height="60px">
					</button>
				</td>
			</tr>
		</table> 
		<br/><br/>
		</span><!-- row -->

在网络上找不到任何解决方案，有人可以帮助我吗？

1 个答案:

答案 0 :(得分：0)

为什么使用span代替div？对于行和列？正确的方法是使用不跨越cols和行的div。

这应该会有所帮助。 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-4">
    <!-- The Search Options -->
    <!-- ============================================================================================== -->
    <!-- Search by Date -->
    <!-- ============================================================================================== -->
    <div class="row">
      <div class="col-sm-12">
        Search by Date:
        <input type="date" ng-model="b.AllsearchDate">
        <button ng-click="b.AllsearchByDate()">
                    <img alt="Search" src="../Ico/search.png" height="19px">
                </button>
        <br />
        <br />
      </div>
    </div>
    <!-- ============================================================================================== -->
    <!-- Search by Price -->
    <!-- ============================================================================================== -->
    <div class="row">
      <a class="col-sm-12">
                Search by Price:
                <input ng-model="b.AllsearchPrice" placeholder="Input max price...." type="number" />
                <button ng-click="b.AllsearchByPrice()">
                    <img alt="Search" src="../Ico/search.png" height="19px">
                </button>
                <br />
                <br />
            </a>
    </div>
    <!-- ============================================================================================== -->
    <!-- Search by Category -->
    <!-- ============================================================================================== -->
    <div class="row">
      <div class="col-sm-12">
        Search by Type: &nbsp
        <select ng-model="b.AllsearchType">
                    <option value="" disabled selected>Select a Type</option>
                    <option value="FOOD">Food</option>
                    <option value="ELECTRICTY">Electricity</option>
                    <option value="RESTAURANTS">Restaurants</option>
                    <option value="HEALTH">Health</option>
                    <option value="SPORTS">Sports</option>
                    <option value="CAMPING">Camping</option>
                    <option value="TRAVELLING">Traveling</option>
                </select>
        <button ng-click="b.AllsearchByType()">
                    <img alt="Search" src="../Ico/search.png" height="19px">
                </button>
        <br />
        <br />
      </div>
    </div>
    <!-- ============================================================================================== -->
  </div>
  <!-- col-sm-4 -->
  <!-- ================================================================================== -->
  <!-- All Coupons table -->
  <!-- ================================================================================== -->
  <table border="1" class="col-sm-8">
    <tr>
      <th ng-click="b.orderBy('id')">ID</th>
      <th ng-click="b.orderBy('title')">Title</th>
      <th ng-click="b.orderBy('start_date')">Start Date</th>
      <th ng-click="b.orderBy('end_date')">End date</th>
      <th ng-click="b.orderBy('amount')">Amount</th>
      <th ng-click="b.orderBy('type')">Type</th>
      <th ng-click="b.orderBy('message')">Message</th>
      <th ng-click="b.orderBy('price')">Price</th>
      <th ng-click="b.orderBy('image')">Image</th>
      <th>Actions</th>
    </tr>
    <tr ng-repeat="c1 in b.allCoupons | orderBy: b.order : b.goUp">
      <td>{{c1.id}}</td>
      <td>{{c1.title}}</td>
      <td>{{c1.start_date}}</td>
      <td>{{c1.end_date}}</td>
      <td>{{c1.amount}}</td>
      <td>{{c1.type}}</td>
      <td>{{c1.message}}</td>
      <td>{{c1.price}}$</td>
      <td><img alt="" src={{c1.image}} width="100px" height="100px"></td>
      <td>
        <button ng-click="b.buy(c1)">
                    <img alt="Buy" src="../Ico/buy.png" width="60px" height="60px">
                </button>
      </td>
    </tr>
  </table>
  <br/>
  <br/>
</div>
<!-- row -->

相关问题
最新问题