В Bootstrap 4 как лучше всего отобразить список, встроенный для средних дисплеев и заблокированный для небольших устройств, таких как телефоны. В настоящее время у меня есть что-то вроде этого, но элементы li все еще встроены из-за .list-inline-item
Это даже лучший подход? Было бы лучше сделать это чисто с помощью флексбокса?
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet"/>
<footer class = "fluid-container">
<div class = "row text-sm-center">
<ul class = "col-md d-md-list-inline d-sm-list-block align-self-center text-md-left" style = "background: pink;">
<li class = "list-inline-item">
<a href = "">About</a>
</li>
<li class = "list-inline-item">
<a href = "">Contact</a>
</li>
<li class = "list-inline-item">
<a href = "">Charity</a>
</li>
<li class = "list-inline-item">
<a href = "">Terms & conditions</a>
</li>
<li class = "list-inline-item">
<a href = "">Site map</a>
</li>
</ul>
<div class = "col-md text-md-right" style = "background: green;">
<p class = "m-0">
© 2011 - 2018 My website, all rights reserved
</p>
<p>
Some other text
</p>
</div>
</div>
</footer>
Я использую флекс, это быстро, легко и надежно. при использовании flex: 0; убедитесь, что предоставили flex-base: auto; специально для ie11:
scss:
ul.class-name
{
display:flex;
flex-wrap:wrap;
li.class-name
{
/* fallback for ie11 */
flex-basis: auto;
/* hide from ie11 with @supports because it doesn't understand this */
@supports(display: grid)
{
flex:0;
}
}
}
Вы пробовали d-lg-inline-block d-md-block
для list-inline-item?
В Бутстрап 4 способ простейший (без лишнего CSS) заключается в использовании flexbox для установки направления в ответ. Просто добавьте d-flex flex-md-row flex-column
в строку ...
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "row text-sm-center">
<ul class = "col-md d-flex flex-md-row flex-column align-self-center text-md-left" style = "background: pink;">
<li class = "list-inline-item">
<a href = "">About</a>
</li>
<li class = "list-inline-item">
<a href = "">Contact</a>
</li>
<li class = "list-inline-item">
<a href = "">Charity</a>
</li>
<li class = "list-inline-item">
<a href = "">Terms & conditions</a>
</li>
<li class = "list-inline-item">
<a href = "">Site map</a>
</li>
</ul>
<div class = "col-md text-md-right" style = "background: green;">
<p class = "m-0">
© 2011 - 2018 My website, all rights reserved
</p>
<p>
Some other text
</p>
</div>
</div>
Демо: https://www.codeply.com/go/KWzGkQEklA
Конечно, столбцы автоматической компоновки по-прежнему считаются частью сетки". Вы также можете использовать классическую сетку для установки ширины.
In Bootstrap 4 what's the best way to display a list that's inline for medium displays and block for smaller devices such as phones
Используйте классы d-*
- документация
встроенный для среднего и более высокого уровня использования d-md-inline
для блока ниже средних окон просмотра amd inline из md используйте комбинацию, например d-block d-md-inline
Есть ли смысл в использовании системы сеток с включением flexbox в bootstrap 4? Некоторое время я не использовал бутстрап и просто собираюсь использовать его снова.