Eingänge innerhalb Bootstrap Gitter nicht funktioniert

Ich habe mit Bootstrap-Raster zu spielen und mein Ziel ist es, diesen Bildschirm zu machen:Eingänge innerhalb Bootstrap Gitter nicht funktioniert

enter image description here

I 4-8 Skala verwendet, so dass die Tabelle ist die 8 und Suchoptionen ist die 4. Ich weiß nicht warum, aber die Suchzeilen reagiert nicht auf die Maus (wie dort etwas auf ihnen) - aber reagiert, wenn ich zu ihnen mit der Registerkarte navigieren.

Der Code dieses Teils ist:

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

keine Lösungen im Internet finden kann, kann mir jemand helfen?

Quelle

2017-07-06 Daniel Liverant

Warum verwenden Sie span anstelle von div? für Zeilen & Spalten? Der richtige Weg ist die Verwendung von divs, nicht span für Spalten und Zeilen.

Dies sollte helfen.

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

Quelle

2017-07-06 06:55:57 Aslam

in Ordnung, aber „div“ bekommen mehr auf dem Bildschirm, die ich will, was ich sonst noch, dass als „div“ verwenden können, arbeiten aber diese riesige Blöcke nicht haben? –

Verwenden Sie kleinere Col-Größen und Offsets. – Aslam

Eingänge innerhalb Bootstrap Gitter nicht funktioniert

Antwort

Verwandte Themen