Вопросы Теги

Bootstrap Grid Горизонтальное выравнивание и свертывание

Это работает для меня, сохраняя массив numpy, построенный с imshow в файл 

import matplotlib.pyplot as plt

fig = plt.figure(figsize=(10,10))
plt.imshow(img) # your image here
plt.axis("off")
plt.subplots_adjust(top = 1, bottom = 0, right = 1, left = 0, 
        hspace = 0, wspace = 0)
plt.savefig("example2.png", box_inches='tight', dpi=100)
plt.show()
0
задан Ashwini Mohan 27 February 2019 в 05:57
поделиться

2 ответа

Итак, я немного поработал с вашим кодом, и я просто отправлю его вам, и постараюсь объяснить как можно больше изменений :) Я бы тоже не назвал себя экспертом по начальной загрузке. , Так что это весело делать.

Во-первых, я заметил, что <link href= не работал в голове. Итак, я изменил это на загрузочную CDN и последнюю версию <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Обязательно совпадите с Javascript из того же источника, если вы хотите позже использовать складную навигацию или карусели или что-то подобное ... 116]

Затем я изменил сетку, чтобы она выглядела примерно так: 

<div class="container-fluid">
      <div class="row">
           <div class="header">Header</div>
      </div>
      <div class="row">
           <div class="navigation-bar">Nav</div>
      </div>


 </div>
 <div class="container-fluid">
 <div class="row">
           <div class="col-sm mbody">
                <div class="article">Article</div>
           </div>
           <div class="col-sm mbody">
                <div class="row">
                     <div class="aside">Aside</div>
                </div>
                <div class="row">
                     <div class="section">Section</div>
                </div>
           </div>
      </div>
 </div>
 <div class="container-fluid">
      <div class="row">
           <div class="footer">Footer</div>
      </div>
 </div>

На самом деле мы хотим получить две строки внутри одного столбца. Эти изменения приблизили нас к тому, что мы хотим , Следующим шагом было дать 100% ширины вашего внутреннего div 

body {
 background-color: black;
 font-size: 2em; 
 text-align: center;

}
.mbody {
 margin: 0; 
 padding: 0; 
}

.header {
  background-color: cornflowerblue;
  height: 60px;
  text-align: center;
  width: 100%; 
}

.navigation-bar {
 background-color: khaki;
 height: 50px;
 text-align: center;
 width: 100%; 
}

.article {
  background-color: darkseagreen;
  height: 180px;
  text-align: center;
  width: 100%; 


}

.aside {
  background-color: goldenrod;
  height: 90px;
  text-align: center;
  width: 100%; 

}

.section {
  background-color: lightsteelblue;
  height: 90px;
  text-align: center;
  width: 100%; 

}

.footer {
  background-color: lemonchiffon;
  height: 40px;
  text-align: center;
  width: 100%; 

}

. Обратите внимание, что в конце концов я изменил класс nav на «navigation-bar», чтобы применить ваш стиль, так как nav это предопределенный класс в начальной загрузке и переопределяет ваш стиль. Затем я добавил класс «mbody» в два столбца и установил поля и отступы в 0, чтобы все совпало без пробелов слева или справа.

Мой результат похож на то, что вы разместили на двух картинках выше. Надеюсь, это полезно. :)

0
ответ дан David Blanchard 27 February 2019 в 05:57
поделиться

Сетка Bootstrap работает таким образом, что если вам не нужно менять ее при изменении размера браузера, вы можете установить только один размер и позаботиться обо всем остальном. col-md-12 должен нормально работать для вас все время.

Чтобы решить свой основной вопрос, проверьте вложенные элементы: https://getbootstrap.com/docs/4.0/layout/grid/#nesting

0
ответ дан Dani Amsalem 27 February 2019 в 05:57
поделиться