stackoom
  简体   繁体   中英

How can I get this layout in bootstrap?

 原文  2020-06-30 07:02:15  6   2    html/ css/ twitter-bootstrap/ layout

Question

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.

2 answers

solution1
 1 ACCPTED  2020-06-30 07:38:21

What I did is just adding margin:auto; to the parent div and margin:auto; display:flex; 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>

solution2
 0  2020-06-30 07:30:52

  1. Remove d-flex class from the div having h-10 and align-items-center classes.
  2. To the div having card class, add width: 100% . The card class will automatically take the full width of its parent as the parent already has flex: 0 0 300px .
  3. Add sticky-top class to card to fix the position.
  4. Add display: block to this_is_the_gray_box class to center the element. 

 <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 align-items-center"> <:-- remove d-flex --> <div class="row"> <div class="col" style="-ms-flex; 0 0 330px:flex; 0 0 330px:"> <div class="card sticky-top" style="margin-bottom; 10px: width; 100%:"> <;-- width and sticky-top --> <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 verogna 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 verogna 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 verogna 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: block" /> <!-- add display block --> </div> </div> </div> </div> </body> </html>

Edit: I have added extra text to the body for testing.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I fix this Bootstrap layout issue? How can I achieve this kind of layout with Bootstrap 5? How can I get a simple 3 stacked column layout in bootstrap 5 to be 100vh How do I get the desired grid layout in bootstrap How can I fix this layout built with twitter bootstrap How can I make a responsive layout with bootstrap that goes from 3 to 2 to 1 columns? how can i make this type of layout in bootstrap studio How to get the form layout after upgrading from bootstrap 2 to bootstrap 3? Get layout of the Bootstrap table How do I format the NavBar Bootstrap 4 Layout with a custom layout
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM