اذهب إلى المحتوى
  • 0

كيف أحل هذا المشكل عند استعمال Bootstrap؟

K@m@l

السؤال

أنشأت عدة أعمدة في صفحة html بالاعتماد على إطار العمل Bootstrap،لكن لا أدري لما لا تظهر، حيث أضفت :

columns-md-4

تحتوي على

<h3>

و

<p>

وهذا الكود بأكمله:

<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="utf-8">
     <title>Random App </title>
     <meta name="description" content="Random App">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>

<style>
body{
padding-top: 40px
}
</style>

<body>

    <!--Navbar-->
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
      <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>

            <a href="" class="navbar-brand">Random</a>

          </div> <!--Navbar Header-->
            <div class="collapse navbar-collapse" id="navbar-collapse">
             <ul class="nav navbar-nav">
               <li><a href="#feed">Feed</a>
               <li><a href="#gallery">Gallery</a>
               <li><a href="#feature">Feature</a>
               <li><a href="#contact">Contact</a>
             </ul>  
        </div> <!--End container-->
    </nav>  <!--End nav-->


             <!--jumbotron-->
        <div class="jumbotron">
         <div class="container text-center">
          <h1>Jumbotron</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor, erat quis suscipit auctor, justo lacus eleifend</p>
             </div><!--End Container-->
        </div><!--End jumbotron-->

        <div class="container">
         <div class="row">
          <div class="col-md-4">
            <h3>Table A</h3>
               <p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
             <blockquote>
             <footer>ujuyj</footer>
             </blockquote>
             <table class="table table-hover">
              <thead>
                <tr class="success">
                 <th>Name</th>
                 <th>Website</th>
                 <th>By</th>
                </tr>
               </thead>
               <tbody>
                 <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
                 <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
                 <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
                 <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
                 <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
                </tbody>

                </div>

            <div class="col-md-4">
        <h3>Table B</h3>
         <p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
         <blockquote>
       <footer>ujuyj</footer>
       </blockquote>
       <table class="table table-hover">
        <thead>
          <tr class="success">
         <th>Name</th>
         <th>Website</th>
         <th>By</th>
        </tr>
         </thead>
               <tbody>
                 <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
         <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
         <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
         <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
         <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
                </tbody>

            </div>




          </div><!--End Row-->
        </div><!--End Container>        



    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
</body>
</html>

ما هي المشكلة بالضبط؟ وكيف يمكنني حلها؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0
المشكلة :
تكمُن في عدم إغلاق وسم الجدول في العمود الأول ووسم الجدول في العمود الثاني كذلك،
الحل:
كل ما عليك فعله هو إغلاق وسم الجدول في العمودين فقط...
-----------------------------------------------------------------------------------------
ولديك مشكلة أخرى وهي عدم إغلاق التعليق في نهاية الـ container بشكل صحيح، لذا اغلق التعليق بهذه الطريقة <-- End container --!>
--------------------------------------------------------------------------------------------------------------------------------------------
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

 فيما يلي تصحيح للكود الخاص بك:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Random App</title>
  <meta name="description" content="Random App">

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>

<style>
  body {
    padding-top: 40px
  }
</style>

<body>

  <!--Navbar-->
  <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a href="" class="navbar-brand">Random</a>

      </div>
      <!--Navbar Header-->
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#feed">Feed</a>
          </li>
          <li><a href="#gallery">Gallery</a>
          </li>
          <li><a href="#feature">Feature</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
      <!--End container-->
  </nav>
  <!--End nav-->


  <!--jumbotron-->
  <div class="jumbotron">
    <div class="container text-center">
      <h1>Jumbotron</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor, erat quis suscipit auctor, justo lacus eleifend</p>
    </div>
    <!--End Container-->
  </div>
  <!--End jumbotron-->

  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h3>Table A</h3>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
        <blockquote>
          <footer>ujuyj</footer>
        </blockquote>
        <table class="table table-hover">
          <thead>
            <tr class="success">
              <th>Name</th>
              <th>Website</th>
              <th>By</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="col-md-4">
        <h3>Table B</h3>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
        <blockquote>
          <footer>ujuyj</footer>
        </blockquote>
        <table class="table table-hover">
          <thead>
            <tr class="success">
              <th>Name</th>
              <th>Website</th>
              <th>By</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
          </tbody>
        </table>
      </div>




    </div>
    <!--End Row-->
  </div>
  <!--End Container>        



    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

 حيث أن الأخطاء المرتكبة يمكن سردها في :

  - عدم إغلاق <div> مع col-md-4 الكلاس الخاصة بإطار العمل bootstrap.

  - عدم إغلاق <div/>  الخاصة بـ <div class="container"> الموجودة في وسم <nav>.

والأخطاء تظهر من خلال الصور:

Hi37S.thumb.png.362d462f49169f647d68cbf4

nKmgs.thumb.png.e9a018717a46b118f271b1f6

من بين الطرق التي يعتمدها المبرمجون لعدم الوقوع في مثل هذه الأخطاء، هي كتابة الكود بشكل منظم، Indentation ونظيف، حتى تتمكن من إغلاق أي وسم تم فتحه.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...