Bootstrap - 列在同一行但在彼此之下？为什么呢？

时间：2018-03-21 21:11:03

标签： html css twitter-bootstrap bootstrap-4

所以我的html中有以下结构

<div container>
<div row>
  <div col-3></div>
  <div col-9>
    <div row>
       -<div col #problem here></div>
       -<div col #problem here></div>
     </div>
   </div> -closing column col-9
 </div> - closing row
</div> - closing container

正如你所看到的，我有一行嵌套在另一行内，然后在那个内部行我有两列（试图将col-9分成更多cols）

问题是，由于某种原因，内部列而不是彼此相邻，并且两者都在行中，并且占据了整个100％的col-9。

（我试图在同一行上输入和按钮）

提前致谢

更新：不，哈哈，我没有忘记课程属性及其工作方式。我在这里输入代码时没有包含它们。就像我说的，它只是结构。或者我的代码。如果需要，请严格复制并粘贴代码，但它非常冗长

此处更新代码：

<div class="container">
<div class="row">
    <!-- ####################################################### NAV BAR ###########################################################-->
    <div class="col col-md-3"> <!-- havbar div -->
        <ul class="nav nav-pills nav-stacked admin-menu">
            <li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" onclick="openContent(event, 'home')" role="tab" aria-controls="home" aria-selected="true"><i class="fa fa-home fa-fw"></i>Home</a></li>
            <li class="nav-item"><a class="nav-link active" id="profile-tab" data-toggle="tab" onclick="openContent(event, 'profile')" role="tab" aria-controls="profile" aria-selected="false"><i class="fa fa-list-alt fa-fw"></i>Profile</a></li>
            <?php if ($super_admin == 1) echo '<li class="nav-item"><a class="nav-link active" id="addstaff-tab" data-toggle="tab" onclick="openContent(event, \'add_staff\')" role="tab" aria-controls="add_staff" aria-selected="false"><i class="fa fa-cogs fa-fw"></i>Add Staff Member</a></li>'?>
            <li class="nav-item"><a class="nav-link active" id="settings-tab" data-toggle="tab" onclick="openContent(event, 'settings')" role="tab" aria-controls="settings" aria-selected="false"><i class="fa fa-cogs fa-fw"></i>Settings</a></li>
            <li class="nav-item"><a href="logout.php" data-target-id="Logout"><i class="fa fa-cogs fa-fw"></i>Log Out</a></li>
        </ul>
    </div>
    <!-- END OF NAVBAR -->

    <div class="tab-content col-md-9 well admin-content"><!-- content div -->
        <!-- ######################################################3################# HOME CONTENT ########################################################################################-->
        <div id="home" class="tab_content">
            <?php echo "<h1>Welcome " . $_SESSION['firstName'] . "!</h1>"?>

            <div class="search">
                <!-- Displays a text box to search for participant -->
                <form action="">
                    <input type="text" id="participant" placeholder="Search for participant" onkeyup="showHint(this.value)">
                    <!--                    <div id="suggestions"></div>-->
                </form>
                <br><br>
                <!-- Displays possible participants (hints) -->
                <p>Suggestions: <span id="txtHint"></span></p>

                <script>
                    function showHint(str){
                        var xhttp;
                        if(str.length == 0){
                            document.getElementById("txtHint").innerHTML = "";
                            return;
                        }
                        xhttp = new XMLHttpRequest();
                        xhttp.onreadystatechange = function(){
                            if(xhttp.readyState == 4 && xhttp.status == 200){
                                document.getElementById("txtHint").innerHTML = xhttp.responseText;
                                // document.getElementById("suggestions").style.border="1px solid #A5ACB2";
                            }
                        };
                        xhttp.open("GET", "getparticipants.php?q=" + str, true);
                        xhttp.send();
                    }
                </script>
                <div class="col col-2"></div>
                <div class="col col-8 table_div"><table class="table">
                        <?php
                        //table header
                        echo '
                <thread>
                <tr>
                  <th scope="col" align="center">ID</th>
                  <th scope="col" align="center">Name</th>
                  <th scope="col" align="center">Email</th>
                </tr>
                </thread>
          <tbody>';

                        //Fetch and print all the records:
                        while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC))
                        {
                            echo
                                '<tr>
                    <td align="center">' . $row['id'] . '</td>
                    <td align="center"><a class="client_name" href="client_profile_overview.php">' . $row['name'] . '</a></td>
                    <td align="center">' . $row['email'] . '</td>
                    <td align="center"><button type="button" class="btn btn-default btn-sm view_profile_btn" id="view_profile_btn">View Profile</button></td>
                  </tr>';
                        }
                        //close the table and free up the resources.
                        echo '</tbody></table>';
                        ?>
                </div>
            </div>
        </div>
        <!-- ######################################################3################# PROFILE CONTENT ########################################################################################-->
        <div id="profile" class="tab_content">
            <h3>Profile</h3>
        </div>
        <!-- ######################################################3################# ADD STAFF CONTENT ########################################################################################-->
        <div id="add_staff" class="tab_content">
            <h3>Add Staff Member</h3>
            <p>Enter Staff ID Number to be added to the System.</p>
            <div class="row">
                <form action="" method="post">
                <div class="col col-5 float-left">
                    <input type="text" name="add_staff" id="staff_id_input" placeholder="New Staff ID">
                </div>
                <div class="col col-2 float-right">

                        <button class="btn btn-info" type="submit">Add</button>

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

            </div>
        </div>
        <!-- ######################################################3################# Settings CONTENT ########################################################################################-->
        <div id="settings" class="tab_content">
            <h3>Settings</h3>
        </div>
    </div>
</div>

inside column

inside row

Main column (col-md-9)

3 个答案:

答案 0 :(得分：0)

在您的代码中，我没有在内容中看到.row课程。

  

.row和.col与表格中的tr和td类似。确保使用.col

包裹.row

代码可以正常检查导入的引导程序文件。

＆＃13;
＆＃13; 
.b {
  border: 2px solid blue;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-3 b">3 - Left</div>
    <div class="col-9 b">
      <div class="row">
        <div class="col b">9 - Left</div>
        <div class="col b">9 - Right</div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

问题在于您似乎忘记了class属性，而是尝试将类本身分配为属性。因此，Bootstrap的类选择器不会适用，并且您的<div>将默认为占用可用宽度的100％的标准（因此堆叠在彼此之上）。

要应用这些课程，而不是<div col-3></div>（例如），您正在寻找<div class="col-3"></div>。并且不要忘记自己包含Bootstrap的文件！

就完整示例而言，您正在寻找：

＆＃13;
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-3">3 - Left</div>
    <div class="col-9">
      <div class="row">
        <div class="col-6">9 - Left</div>
        <div class="col-6">9 - Right</div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我还建议您将 the official examples 作为起点。

答案 2 :(得分：-1)

如果黑曜石错了，你只是用这个'语法'作为捷径，它看起来很好。因此，请发布您的真实代码或检查拼写错误。

相关问题
最新问题