Как получить желаемый макет сетки в bootstrap - PullRequest
Новая
       0

Как получить желаемый макет сетки в bootstrap

0 голосов
/ 28 мая 2020

Я занимался этим в течение некоторого времени, и я приблизился к желаемому результату, но всегда есть проблема с центрированием. Мне кажется, что это миниатюрные диаграммы справа, выровненные по квадрату, как показано на прилагаемом рисунке. Я знаю, что мое понимание кода div не там, где он должен быть, и я уверен, что мои проблемы исходят из этого. Любая помощь будет принята с благодарностью. enter image description here

<div class="container-fluid">
    <div class="row bg-secondary text-light">
        <div class="col-sm-12">  

  </div>  

  <div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 bg-secondary text-light">
            <div>
              <h4><b>Project Summary</b></h4>
                <p>Here is  bunch of that doesn't mean anything for the purposes of sharing this code 
                  latitude location. The adsfasdf includes analysis of asfdd, fdfdf sdsd, dfdf Index
                  and Humidity. These data are then asdfasdfasdfas fsadf asdf asdf asdfof latitude. The data was
                  drawn from other stff adsfasdfasdfasdfadsfasdfasdfasdfsdfasdf  adsfasdfdfadsfadsfsdfsdf 
                  using Python API calls to that site, then stored in CSV files and integrated into Panda Dataframes and plotted 
                  with Matplotlib.<br></p>

                 <p></p>  asfasdf asdf d d fsdf sadf d d adsf asdf sd d d asdf d df sd fadsa fsd f
                </p>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-6">
                 <br>   
                    <img src="fig1.png" alt="Bootcamp" width="500" height="500">"

                </div>

            <div class="col-sm-3 bg-secondary text-light">
              <div class="row">
                  <h5>Visualizations</h5>

            <div class="col-sm-3 bg-secondary text-light justify-content-cente">
            </div>  
                  <img src="Fig1.png" class="img-thumbnail" alt="Temp v Alt" width="195" height="236"> 
                  <img src="Fig2.png" class="img-thumbnail" alt="Temp v Alt" width="195" height="236">




                  <div class="col-sm-3 bg-secondary text-light">
                  </div>  
                        <img src="Fig3.png" class="img-thumbnail" alt="Temp v Alt" width="195" height="236"> 
                        <img src="Fig4.png" class="img-thumbnail" alt="Temp v Alt" width="195" height="236">
            </div>



            </div>
        </div>
        <!-- Add second row -->
        <br>
        <div class="col-sm-12 bg-secondary text-light">
            <div>
                <p>Text 2</p>
            </div>
        </div>
        <div class="col-sm-12 bg-secondary text-light">
            <div>

            </div>
        </div>

        <div class="col-sm-12 row justify-content-center">
            <div class="row">
                <div class="col-sm-12">


                </div>
                <div class="col-sm-1bg-secondary text-light">

                </div>
            </div>
        </div>
    </div>
</div>



</body>
</html>

Ответы [ 2 ]

0 голосов
/ 29 мая 2020

Вот решение в Bootstrap: 

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.boxes-left,
.box-centre,
.boxes-right {
  padding-top: 10vh;
  height: 90vh;
}

.box1,
.box2 {
  width: 100%;
  height: 50%;
}

.box1 {
  background: red;
}

.box2 {
  background: green;
}

.box-middle {
  background: blue;
  width: 100%;
  height: 100%;
}

.boxes-right {
  height: 100%;
  position: relative;
}

.title {
  text-align: center;
}

.box-r {
  float: left;
  width: 48%;
  height: 200px;
  margin: 1%;
  /* margin: 5%; */
  background: orange;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="col-md-2 boxes-left">
        <div class="box1"></div>
        <div class="box2"></div>
      </div>

      <div class="col-md-6 box-centre">
        <div class="box-middle"></div>
      </div>

      <div class="col-md-4 boxes-right">
        <div class="col-md-12 title">
          <h1>Your Text Here</h1>
        </div>
        <div class="col-md-6 box-r"></div>
        <div class="col-md-6 box-r"></div>
        <div class="col-md-6 box-r"></div>
        <div class="col-md-6 box-r"></div>
      </div>
    </div>
  </body>
</html>
0 голосов
/ 28 мая 2020

Я лично рекомендую попробовать это в сырых HTML и CSS перед погружением в мир Bootstrap.

Хотя это не 100% идеальное решение, вот быстрое решение, которое выполнит ваш дизайн. 

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  position: relative;
  margin-left: 10%;
  margin-right: 10%;
}

.boxes-left {
  float: left;
  padding-top: 5vh;
  height: 90vh;
  width: 20%;
}

.box1,
.box2 {
  width: 100%;
  height: 50%;
}

.box1 {
  background: red;
}

.box2 {
  background: green;
}

.box-centre {
  float: left;
  padding-top: 10vh;
  height: 80vh;
  width: 50%;
}

.box3 {
  width: 100%;
  height: 100%;
  background: blue;
}

.boxes-right {
  float: left;
  padding-top: 5vh;
  width: 30%;
  height: 90vh;
}

.boxes-right > h1 {
  text-align: center;
}

.box-r {
  position: relative;
  float: left;
  margin: 5%;
  width: 40%;
  height: 20%;
  background: orange;
}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="boxes-left">
        <div class="box1"></div>
        <div class="box2"></div>
        </div>

        <div class="box-centre">
        <div class="box3"></div>
        </div>

        <div class="boxes-right">
        <h1>Your Text Here</h1>
        <div class="box-r"></div>
        <div class="box-r"></div>
        <div class="box-r"></div>
        <div class="box-r"></div>
        </div>
    </body>
    </html>

Дайте мне знать, если это решение, которое вам нужно!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...