时间戳

首页 > 解决方案 > How can I get this layout in bootstrap?

html - How can I get this layout in bootstrap?

问题描述

I want to have an layout like this. I have a fixed sidebar on the left that is 330px wide. Also I have a gray box that should stay on the center of the screen and only moves up or down if the content of the box above changes height.

I don't get how I can make the gray box and the box with the variable content at the center of the screen. That's what I currently have:

<html style="height: 100%">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>



<body style="height: 100%;">
  <div class="container-fluid h-100">
  <div class="h-100 d-flex align-items-center">
    <div class="row">
        <div class="col" style="-ms-flex: 0 0 330px;flex: 0 0 330px;">
            <div class="card" style="margin-bottom: 10px; width: 330px;">
                <div class="card-body align-items-center">
                    Sidebar stuff
                </div>
            </div>
        </div>
        <div>
            <div id="this_is_the_box_with_contant" style="width: 700px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
            <input id="this_is_the_gray_box" type="button" class="btn" value="" style="background-color:lightblue; width: 350px; height: 350px; border: solid 50px grey;border-radius: 50px;margin:auto" />
        </div>
    </div>
</div>

</div>
</body>
</html>

On a full screen there is many space at the right of both boxes. I think I need to change something at the div element that doesn't has anything.

What do I need to do? And also don't change the body and the first container-fluid element.

标签： htmlcsstwitter-bootstraplayout

解决方案

What I did is just adding margin:auto; to the parent div and margin:auto; display:flex; to grey box so it will be centered.

Keep in mind that it's good practice in general if you include your CSS in a different file though. 

  <div class="container-fluid h-100">
  <div class="h-100 d-flex align-items-center">
    <div class="row">
        <div class="col" style="-ms-flex: 0 0 330px;flex: 0 0 330px;">
            <div class="card" style="margin-bottom: 10px; width: 330px;">
                <div class="card-body align-items-center">
                    Sidebar stuff
                </div>
            </div>
        </div>
        <div style="margin: auto;">
            <div id="this_is_the_box_with_contant" style="width: 700px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
            <input id="this_is_the_gray_box" type="button" class="btn" value="" style="background-color:lightblue; width: 350px; height: 350px; border: solid 50px grey;border-radius: 50px; margin:auto; display:flex;">
        </div>
    </div>
</div>

</div>

推荐阅读