#html #css #twitter-bootstrap-3
#HTML #css #twitter-bootstrap-3
Вопрос:
Я хочу создать контейнер для кнопок и текста, используя класс card с черным прозрачным фоном и радиусом границы для каждой карты, например, так
. проблема в том, что у той, которую я создал, есть разрыв между каждой картой, вот так 
вот код jsfiddle
.kontribusi{
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
} <div class="container-fluid text-center">
<h3>Ayo Mulai Berkontribusi</h3><br>
<div class="row">
<div class="kontribusi col-sm-2 col-sm-offset-1">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Beri Donasi</a></h4>
<p class="card-text">Untuk masalah kesehatan perorangan amp; masyarakat</p>
</div>
</div>
<div class="kontribusi col-sm-2">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Galang Dana</a></h4>
<p class="card-text">Untuk membuat kampanye penggalangan dana</p>
</div>
</div>
<div class="kontribusi col-sm-2">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Jadi Relawan</a></h4>
<p class="card-text">Untuk bantu terlibat dalam aksi kemanusiaan di bidang kesehatan</p>
</div>
</div>
<div class="kontribusi col-sm-2">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Butuh Relawan</a></h4>
<p class="card-text">Untuk dilibatkan dalam aksi kemanusiaan di bidang kesehatan</p>
</div>
</div>
<div class="kontribusi col-sm-2">
<div class="card card-block text-xs-center" >
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4>
<p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p>
</div>
</div>
</div>
</div> Комментарии:
1. На вашем втором изображении нет пробелов между картами… вам нужен определенный запас между элементами карты?
2. да, но я хочу, чтобы он был отзывчивым
Ответ №1:
Вы можете удалить .kontribusi класс из контейнера div и вместо этого добавить его во внутренний div. Затем добавьте немного отступов во внутренний div. Вот jsfiddle:
Комментарии:
1. как сохранить его отзывчивым, потому что, когда я уменьшил его до меньшего размера, он становится грязным?
2. добавить
margin-bottom:10pxв класс. Вы можете использовать медиа-запрос, если не хотите, чтобы этот запас превышал разрешение планшета. Скрипка здесь: jsfiddle.net/DTcHh/260063. вау, это работает, но как сделать так, чтобы все карты имели одинаковую высоту?
4. @Wallflower Чтобы сделать их все одинаковой высоты и сохранить их отзывчивыми, я удалил столбцы начальной загрузки и должен был в основном переписать все это с помощью flexbox. Вот jsfiddle: jsfiddle.net/DTcHh/26010
5. @Wallflower помогло ли это?
Ответ №2:
Вместо вашего исходного кода используйте это вместо:
.kontribusi{
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
margin:0 10px 0 10px;
} Комментарии:
1. Я проверил это решение, и это нарушает сетку — вся сетка будет сдвинута влево. Посмотрите: jsfiddle.net/DTcHh/26003
Ответ №3:
Вместо этого используйте этот код, я уверен, что это вам поможет.
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.wrapper{
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
padding:5px;
} <div class="container-fluid text-center">
<h3>Ayo Mulai Berkontribusi</h3>
<br>
<div class="row">
<div class="col-sm-2 col-sm-offset-1">
<div class="wrapper">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4>
<p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="wrapper">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4>
<p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="wrapper">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4>
<p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="wrapper">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4>
<p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="wrapper">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4>
<p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p>
</div>
</div>
</div>
</div>
</div> Комментарии:
1. Дело в том, что класс bootstrap имеет предопределенное поведение, и не всегда можно добавлять к нему дополнительные стили внутри, лучше позволить им быть держателем, а затем создать оболочку вокруг основного содержимого, а затем добавить к нему свои пользовательские стили. Пожалуйста, скажите мне, что вы думаете об ответе.
Ответ №4:
Здравствуйте, проверьте приведенную ниже скрипку, надеюсь, вы ищете это, я не добавлял основные стили, но создал базовый макет, который вы ищете, который вы можете настроить как свой собственный стиль.
Я просто добавил дополнительный столбец для создания сеток.
.col-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
Обновлена скрипка BootstrapGrid
надеюсь, это поможет.
Комментарии:
1. разрыв слишком узкий, и кнопка прилипает к границе
2. Я уже говорил, что не добавлял много css и все еще не очень много исправил проблему с интервалом. Смотрите обновленную скрипку