Question

我想在md大小的屏幕上隐藏col-md-0列。但它显示我的屏幕。我怎么能隐藏它？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

存在于我的<head>标记

中

 <div class="container-fluid top-nav">
        <div class="row">
            <div class="hidden-xs hidden-sm col-md-1 left-fixed-bar">
                나왔다가 숨겨질 부분.
            </div>
            <div class="col-xs-1 col-sm-1 hidden-md left-fixed-bar">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
            <!-- End of left part -->
            <div class="hidden-xs hidden-sm col-md-8 center-fixed-bar">
                나왔다가 숨겨질 부분.
            </div>
            <div class="col-xs-9 col-sm-9 hidden-md">
                숨겨져있다 나올 부분
            </div>
            <!-- End of center part -->
            <div class="col-xs-2 col-sm-2 col-md-3 right-fixed-bar">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div>
            <!-- End of right part -->
        </div>
    </div>

Answer 1

实际上没有像col-md-0这样的课程，你需要编写媒体查询并在中等屏幕分辨率上设置width: 0%;。或者您可以根据您的要求使用hidden-md课程。这将隐藏你的div中等分辨率。我已经为你附上了代码spinet。

＆＃13;

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  </head>
  <body>
     <div class="container-fluid top-nav">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 left-fixed-bar">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
            <div class="hidden-xs hidden-sm col-md-8 center-fixed-bar">
                EMPTY
            </div>
            <div class="col-xs-9 col-sm-9 hidden-md">
                TITLE
            </div>
            <div class="col-xs-2 col-sm-2 col-md-3 right-fixed-bar">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div>
        </div>
    </div>
  </body>
</html>

＆＃13;

Answer 2

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid top-nav">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 left-fixed-bar">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
            <div class="hidden-xs hidden-sm col-md-8 center-fixed-bar">
                EMPTY
            </div>
            <div class="col-xs-9 col-sm-9 hidden-md">
                TITLE
            </div>
            <div class="col-xs-2 col-sm-2 col-md-3 right-fixed-bar">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div>
        </div>
    </div>

Bootstrap hidden-md无效

2 个答案: