Boostrap元素溢出其容器

时间：2017-06-28 11:28:32

标签： css twitter-bootstrap twitter-bootstrap-3

我试图用导航栏和两个并排的井实现一个简单的设计，但是井没有与他们的容器对齐，水平向右溢出（截止于http://imgur.com/a/4XK25）< / p>

我也喜欢适合屏幕高度的水井，但目前它们会垂直溢出，因此用户必须向下滚动。

这是我的代码，JSFiddle呈现的方式与Firefox不同（链接到上面的截图），在https://jsfiddle.net/vrk3vcxb/

小提琴 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>


<body>

<div class="container">

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div> <!-- /.navbar-header -->


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> One
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>            
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
         <li onclick="#">
            <a href="#"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Four</a>
        </li>
         <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Five
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Six</a></li>
            <li><a href="#">Seven</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Eight</a></li>
          </ul>
        </li>
      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<div class="container">
  <div class="row">
    <div class="col-md-8">
        <div class="well">

        </div>      
    </div>
    <div class="col-md-4">      
        <div class="btn-group btn-group-xl" role="group">
          <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Nine</button>
          <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Ten</button>
        </div>
        <div class="well">

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

</div> <!-- top container -->


</body>

我做错了什么提示？

3 个答案:

答案 0 :(得分：2)

最好删除'row'类上方的'container'类，它将有助于溢出到右边。 为了使井适合屏幕高度，只需添加一些样式：<?php $servername = "localhost"; $username = "root"; $password = "Mm101010"; $dbname = "smartphone"; $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error()); $requestData = $_REQUEST; $columns = array( 0 => 'USER_ID', 1 => 'Nom', 2 => 'Prenom', 3 => 'Num_SIM', 4 => 'PIN_Terminal', 5 => 'PIN_SIM', 6 => 'Num_IMEI', 7 => 'Date_Debut', 8 => 'Date_Fin', 9 => 'Vitre', 11 => 'Coque', 12 => 'Support_Vehicule', 13 => 'Actif', 14 => 'Statut' ); $sql = "SELECT Or_Affectation "; $sql.=" FROM vu_affect_empl"; $query=mysqli_query($conn, $sql) or die("Affectation.php: get employees"); $totalData = mysqli_num_rows($query); $totalFiltered = $totalData; $sql = "SELECT Or_Affectation, USER_ID, Nom, Prenom, Num_SIM, PIN_Terminal, PIN_SIM, Num_IMEI, Date_Debut, Date_Fin, Vitre, Coque, Support_Vehicule, Actif, Statut "; $sql.=" FROM vu_affect_empl WHERE 1=1"; if( !empty($requestData['search']['value']) ) { $sql.=" AND ( USER_ID LIKE '".$requestData['search']['value']."%' "; $sql.=" OR Num_SIM LIKE '".$requestData['search']['value']."%' "; $sql.=" OR Nom LIKE '".$requestData['search']['value']."%' )"; } $query=mysqli_query($conn, $sql) or die("Affectation.php: get employees"); $totalFiltered = mysqli_num_rows($query); $sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; $query=mysqli_query($conn, $sql) or die("Affectation.php: get employees"); $data = array(); $i=1+$requestData['start']; while( $row=mysqli_fetch_array($query) ) { $nestedData=array(); $nestedData[] = "<input type='checkbox' class='updateRow' value='".$row['Or_Affectation']."' /> N°".$i ; $nestedData[] = $row["USER_ID"]; $nestedData[] = $row["Nom"]; $nestedData[] = $row["Prenom"]; $nestedData[] = $row["Num_SIM"]; $nestedData[] = $row["PIN_Terminal"]; $nestedData[] = $row["PIN_SIM"]; $nestedData[] = $row["Num_IMEI"]; $nestedData[] = $row["Date_Debut"]; $nestedData[] = $row["Date_Fin"]; $nestedData[] = $row["Vitre"]; $nestedData[] = $row["Coque"]; $nestedData[] = $row["Support_Vehicule"]; $nestedData[] = $row["Actif"]; $nestedData[] = $row["Statut"]; $data[] = $nestedData; $i++; } $json_data = array( "draw" => intval( $requestData['draw'] ), "recordsTotal" => intval( $totalData ), "recordsFiltered" => intval( $totalFiltered ), "data" => $data ); echo json_encode($json_data); ?>

答案 1 :(得分：1)

为了解决你的问题，你可能希望将它添加到col-md-4 div ...在小提琴中你把它放在padding之外...

当您向井中添加内容时，他们应该垂直填充页面...您可以随时添加一些<body> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- /.navbar-header --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Scans <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Scan files</a></li> <li><a href="#">See previous scans</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li onclick="#"> <a href="#"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Help</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Account <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Send feedback</a></li> <li><a href="#">Upgrade account</a></li> <li role="separator" class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="row"> <div class="col-md-8"> <div class="well"> <div id="dText" style="background: white; height: 85%; overflow-y:auto; padding:10px;" ></div> </div> </div> <div class="col-md-4"> <div class="btn-group btn-group-xl" role="group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span> Previous</button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span> Next</button> </div> <div class="well"> <div id="dText2" style="background: white; height: 85%; overflow-y:auto; padding:10px;" ></div> </div> </div> </div> </div> <!-- top container --> </body> </html> 我还建议使用单独的CSS文件并删除内联样式。

如果您需要更多帮助，请告诉我，并为您修改我的答案。

container

你还有一个navbar包裹着整个东西......但是在container-fluid内你有一个add.indicator( strategy = qs.strategy, name = "SMA", arguments = list( x = quote(Cl(mltdata)), n=10), label = "SMA10" ) 尝试自己从头开始编写整个东西......使用bootstarp documentaion for referance

答案 2 :(得分：0)

对于井高，您可以使用，如已建议的VH，或Flexbox，如果不需要支持资源管理器＆lt; 9。 至于网格，你有一个嵌套的容器类给出一个额外的填充，你的代码应该是这样的：

<div class="container">
<nav class="navbar navbar-default">
  <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div> <!-- /.navbar-header -->


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> One
        <span class="caret"></span>
          </a>
      <ul class="dropdown-menu">
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>            
      </ul>
    </li>
  </ul>

  <ul class="nav navbar-nav navbar-right">
     <li onclick="#">
        <a href="#"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Four</a>
    </li>
     <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Five
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Six</a></li>
        <li><a href="#">Seven</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Eight</a></li>
      </ul>
    </li>
  </ul>

</div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
  <div class="row">
    <div class="col-md-8">
    <div class="well">

    </div>      
    </div>
    <div class="col-md-4">      
    <div class="btn-group btn-group-xl" role="group">
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Nine</button>
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Ten</button>
    </div>
    <div class="well">

    </div>
</div>

Codepen：https://codepen.io/giannidk/pen/owpYEG?editors=1100

相关问题
最新问题