All geek questions in one place

Prevent styling in Bootstrap 3 and use overflow hidden to hide grid cells

I use the Bootstrap 3 grid, and I want cells that don't fit on the line to be hidden using parent overflow: the hidden CSS property, and not appear on the next Bootstrap line ("stacked").

Is it possible? Take a look at this example:

http://plnkr.co/edit/TYyEcYSe1MhZWTCFnJln?p=preview

<!DOCTYPE html>
<html>

<head>

  <style>

    #grid-container {
      overflow: hidden; 
    }

    #grid-container div {
      background-color: #cdcdcd;
      border-right: 1px solid white;
      border-bottom: 1px solid white;
    }
  </style>

  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div id="grid-container" class="col-xs-12">
          <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            Item 1
          </div>
          <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            Item 2
          </div>
          <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            Item 3
          </div>
          <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            Item 4
          </div>
          <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            Item 5
          </div>
          <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            Item 6
          </div>
      </div>
    </div>
</div>

</body>

</html>

In this example, I would like everything to be on one single line, always, and I have cells that don't fit hidden when the # grid-container: hidden container overflows.

Thank.

+4
source share
1 answer

. , Bootstrap.

div divs, : , css:

div (# grid-container )

white-space: nowrap;
overflow: hidden;

divs/elements (# grid-container div )

display: inline-block;
float: none; <!-- overrides Bootstrap float:left for grid columns -->

:

http://plnkr.co/edit/8ns6Ov4fylTq97Z62MTj?p=preview

<!DOCTYPE html>
<html>

<head>

  <style>

    #grid-container {
      white-space: nowrap;
      overflow: hidden; 
      width: 80%;
    }


    .item {
      width: 25%;
      display: inline-block;
      background-color: #cdcdcd;
      border-right: 1px solid white;
      border-bottom: 1px solid white;
    }
  </style>

</head>

<body>
    <div id="grid-container">
      <div class="item">
        Item 1
      </div>
      <div class="item">
        Item 2
      </div>
      <div class="item">
        Item 3
      </div>
      <div class="item">
        Item 4
      </div>
      <div class="item">
        Item 5
      </div>
      <div class="item">
        Item 6
      </div>
</div>

</body>

</html>
+5

Source: https://habr.com/ru/post/1568335/

More articles:


All Articles