बूटस्ट्रैप v4

Question

बूटस्ट्रैप 3 में तालिका के लिए उत्तरदायी कॉलम चौड़ाई निर्दिष्ट करने के लिए, मैं आसानी से उत्तरदायी संवेदनशील तालिका डिज़ाइन कर सकता हूं। मैं स्तंभों को उनके ग्रिड सिस्टम में विभाजित कर सकता हूं। इससे अधिक मैं छोटे उपकरणों के लिए कुछ कॉलम छुपा सकता हूं। मेरा उदाहरण यहाँ है। तालिका में 13 कॉलम हैं। पहले दो स्तंभों में प्रत्येक 25% चौड़ाई है, शेष कॉलम शेष 50% चौड़ाई साझा करेंगे।

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
<div class="row"> 
 
<table class="table table-bordered"> 
 
<tr> 
 
    <td class="col-xs-3">1</td> 
 
    <td class="col-xs-3">2</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    <td>7</td> 
 
    <td>8</td> 
 
    <td>9</td> 
 
    <td>10</td> 
 
    <td>11</td> 
 
    <td>12</td> 
 
    <td>13</td> 
 
</tr> 
 
</table> 
 
</div> 
 
</div>

कोड से ऊपर बूटस्ट्रैप 4 में काम कर आप देख सकते हैं कॉलम की चौड़ाई की उम्मीद नहीं कर रहे हैं नहीं है। मैंने अपने रिलीज नोट्स की जांच की, इसमें टेबल लेआउट के किसी भी ब्रेकिंग चेंज का उल्लेख नहीं है।

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
<div class="row"> 
 
<table class="table table-bordered"> 
 
<tr> 
 
    <td class="col-3">1</td> 
 
    <td class="col-3">2</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    <td>7</td> 
 
    <td>8</td> 
 
    <td>9</td> 
 
    <td>10</td> 
 
    <td>11</td> 
 
    <td>12</td> 
 
    <td>13</td> 
 
</tr> 
 
</table> 
 
</div> 
 
</div>

अब अगर मैं पहले दो स्तंभों के लिए style="width:25%" जोड़ने के लिए, यह काम करेंगे। अब मैं यह जानना चाहता हूं कि मेरा उपयोग गलत है या बूटस्ट्रैप 4 उत्तरदायी कॉलम चौड़ाई निर्दिष्ट करना संभव नहीं है। किसी भी संकेत की अत्यधिक सराहना की जाती है।

अद्यतन # 1 @CamiloTerevinto के सुझाव के बारे में, col-xs-* अब col-* नाम दिया गया है।

1. https://github.com/twbs/bootstrap/issues/21547
2. https://github.com/twbs/bootstrap/issues/21913

इस के लिए एक अस्थायी समाधान <tr class="row"> और फिर सेट स्थापित करने के लिए है:

अद्यतन # 2 मैं उनकी समस्या ट्रैकर में कुछ संबंधित विचार विमर्श पाया col-1 के साथ शेष कॉलम। लेकिन जैसा कि लेखक ने उल्लेख किया है कि आपको उसी कक्षा को td में सेट करना है जो बहुत व्यावहारिक नहीं है।

Answer 1

आप 13 कॉलम ग्रिड के लिए बूटस्ट्रैप मार्कअप का उपयोग करने में सक्षम नहीं होंगे।

25% की गारंटी के लिए आप क्या कर सकते हैं, 50% में से 25% और अन्य 50% होने के लिए उन्हें नीचे दिखाए गए बड़े divs में सेट किया गया है।

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table class="table"> 
 
<tr> 
 
    <div class="col-xs-6"> 
 
     <td class="col-xs-3">COL 1</td> 
 
     <td class="col-xs-3">COL 2</td> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <div class="col-xs-2"> 
 
     <td>COL 3</td> 
 
     <td>COL 4</td> 
 
     <td>COL 5</td> 
 
     <td>COL 6</td> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <td>COL 7</td> 
 
     <td>COL 8</td> 
 
     <td>COL 9</td> 
 
     <td>COL 10</td> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <td>COL 11</td> 
 
     <td>COL 12</td> 
 
     <td>COL 13</td> 
 
    </div> 
 
    </div> 
 
</tr> 
 
</table>

Answer 2

बस इस तरह, <tr> टैग पर वर्ग row का उपयोग करें:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
<div class="row"> 
 
<table class="table table-bordered"> 
 
<tr class="row"> 
 
    <td class="col-md-3">1</td> 
 
    <td class="col-md-3">2</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    <td>7</td> 
 
    <td>8</td> 
 
    <td>9</td> 
 
    <td>10</td> 
 
    <td>11</td> 
 
    <td>12</td> 
 
    <td>13</td> 
 
</tr> 
 
</table> 
 
</div> 
 
</div>

इस समस्या को दूर करना चाहिए