मेरे पास बूटस्ट्रैप पृष्ठ है जहां मुझे एक छोटी सी समस्या का सामना करना पड़ रहा है। समस्या डेस्कटॉप मोड में है, एक कॉलम उस क्षेत्र तक नहीं पहुंचता है जहां इसकी आवश्यकता होती है। अगर मैं सीएसएस में ऊंचाई को संशोधित करता हूं तो यह अन्य दो divs को नीचे की ओर धकेलता है। मैं शीर्ष div को नीचे के क्षेत्र तक कैसे पहुँचा सकता हूँ जहाँ उपकरण अनुभाग बिना कोने और उपकरण को नीचे धकेले समाप्त होता है? क्या यह बूटस्ट्रैप के साथ संभव है?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<body style="background:#F8F8F8;">
    <p>
        <br/>
    </p>

    <div class="container-fluid">

        <nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">

                <a href="" class="navbar-brand">
                    <img alt="" src="image.png" height="22" width="81" />
                </a>
            </div>
            <!-- Collection of nav links, forms, and other content for toggling -->
            <div id="navbarCollapse" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-left">


                </ul>
            </div>
        </nav>
        <BR>
        <BR>
        <div class="row">
            <div class="col-md-4" "col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="welcome">
                            <div id="container">
      Test info

                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" "col-xs-4">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="prescription">
                            <div id="container">
                                PL
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" "col-xs-4">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="profile">
                            <div id="container">
                               Profile
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="ghabox">
                            <div id="container2">
                                Ask
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="ghabox">
                            <div id="container2">
                                Discussions
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6" "col-xs-4">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="contributors">
                            <div id="container2">
                                Top 
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="ghabox">
                            <div id="container2">
                              Corner
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="ghabox">
                            <div id="container2">
                                Tools
                            </div>

                        </div>
                    </div>
                </div>
            </div>






        </div>



    </div>
    </div>
0
vzupo 6 जून 2016, 02:39

2 जवाब

सबसे बढ़िया उत्तर

साइट को बूटस्ट्रैप पर ग्रिड नेस्टिंग साइट पढ़ने के बाद, मेरे पास एक समाधान है।

`<div class="container"><div class="row"><div class="col-sm-9"><div class="row"><div class="col-sm-6" style="height:100px;backgroundcolor:lightblue;"></div><div class="col-sm-6" style="height:100px;background-color:white;"></div></div><div class="row"><div class="col-sm-12" style="height:150px;background-color:red;"></div></div><div class="row"><div class="col-sm-4" style="height:150px;background-color:orange;"</div><div class="col-sm-4" style="height:150px;background-color:yellow;"</div><div class="col-sm-4" style="height:150px;background-color:green;"></div></div></div><div class="col-sm-3" style="background-color:black;height:400px;"></div>

`

0
vzupo 10 जून 2016, 16:57

अगर मैं आपके प्रश्न को अच्छी तरह समझता हूं, तो शीर्ष div के चारों ओर लपेटने के लिए कोने और उपकरण div शीर्ष div के अंदर होना चाहिए।

 <div class="col-md-6" "col-xs-4">
   <div class="panel panel-default">
      <div class="panel-body">
        <div class="contributors">
          <div id="container2">
            Top 
          </div>
        </div>
        <div class="col-md-3">
          <div class="panel panel-default">
            <div class="panel-body">
              <div class="ghabox">
                <div id="container2">
                  Corner
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="panel panel-default">
            <div class="panel-body">
              <div class="ghabox">
                <div id="container2">
                  Tools
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

यह देखें प्लंकर

0
El'Magnifico 6 जून 2016, 03:30