Question

I want to show header just in small size but col-sm-* class of div inside container not work correctly and not float them

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid" style="background-color:purple">
        <div id="header" class="d-none d-sm-block d-md-none">
            <div class="container">
                <div class="col-sm-3" style="background-color:red">  a </div>
                <div class="col-sm-6" style="background-color:blue"> b  </div>
                <div class="col-sm-3" style="background-color:green"> c  </div>
            </div>
        </div>
    </div>

Answer 1

This is because you forgot one crucial element: The row.

You always need a div with the row class to put your column(s) in.

Here's the working code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid" style="background-color:purple">
    <div id="header" class="d-none d-sm-block d-md-none">
        <div class="container">
            <div class="row">
                <div class="col-sm-3" style="background-color:red">a</div>
                <div class="col-sm-6" style="background-color:blue">b</div>
                <div class="col-sm-3" style="background-color:green">c</div>
            </div>
        </div>
    </div>
</div>

Display classes not work correctly for inside element

1 个答案: