Текст продолжает нажимать кнопку в bootstrap

ProgramBox

Текст продолжает нажимать кнопку в bootstrap

Post author:admin
Запись опубликована:24 августа, 2022
Post category:Вопросы по программированию

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Итак, у меня есть некоторый <p> тег и текст в нем, и он расположен слева от кнопки. Если текст продолжает увеличиваться, кнопка продолжает сдвигаться вправо. Я хочу расположить все кнопки в правом нижнем углу каждого div. Вот мой HTML:

 #dugme {    
  font-weight: bold;
  left: 15vw;
  line-height: 2vw;
  color: white;
  background-color: rgb(17, 142, 146);
  text-align: center;
  border: white 2px solid;
}

#dugme:hover{
  background-color: aliceblue;
  color: rgb(17, 142, 146);
}

#stripovi {
  padding-top: 2em;
  margin-bottom: 1em;
  margin-left: 10px;
}

#comic {
  display: inline-block;
  background-color: rgb(230, 200, 119);
  border-radius: 3px;
  margin-right: 15px;
  margin-top: 5px;
  margin-bottom: 5px;

}

.naziv {
  font-family: 'Fredoka One', cursive;
  float: right;
  margin-top: 100px;
  word-wrap: break-word;
  margin-top: auto;
  margin-left: auto;
}

.container-fluid{
  background-color: rgb(74, 198, 202);
}

 <div class="row" id="stripovi">
      <div class="comic w-50">
          <div class="comic-img-top d-flex align-items-center form-group" id="comic">
              <div class="thumbnail">
                  <img class="img-responsive" src="slike/c1.jpg" alt="comicbook">
                  <div class="naziv">
                      <p class="col p-2 m-0">Heavy Metal Comic</p>
                      <p class="col p-2 m-0" style="color: rgb(155, 151, 151); text-align: left;">ID:0101</p>
                  </div>
              </div>
              <div class="form-group">
                  <button type="button" class="btn btn-info" id="dugme">Dodaj</button>
              </div>
          </div>
      </div>
      <div class="comic w-50">
          <div class="comic-img-top d-flex align-items-center form-group" id="comic">
              <div class="thumbnail">
                  <img class="img-responsive" src="slike/c2.jpg" alt="comicbook">
                  <div class="naziv">
                      <p class="col p-2 m-0">Deadly Class</p>
                      <p class="col p-2 m-0" style="color: rgb(155, 151, 151); text-align: left;">ID:0101</p>
                  </div>
              </div>
              <div class="form-group">
                  <button type="button" class="btn btn-info" id="dugme">Dodaj</button>
              </div>
          </div>
      </div>
  </div>

Вот как выглядят кнопки.Как вы можете видеть во втором комиксе, текст переместил кнопку вправо. Я хочу, чтобы кнопка оставалась в одном и том же положении для каждого продукта, и эта позиция была бы нижним правым углом этого прямоугольника.

Заранее благодарю вас!

Ответ №1:

Вы можете добавить position: relative , чтобы comic-img-top удалить id="comic" и вместо этого использовать классы. Идентификатор должен быть уникальным, поэтому вы не должны его повторять. Добавьте еще один пользовательский класс в form-group, контейнер, в котором находится кнопка.

CSS

     position: absolute;
    bottom: 0;
    right: 0;

Это даст вам желаемый результат

 
#comic { // Make this  a class and not an ID if it is going to be repeated
    position: relative;
}

.form-group.new-button-container-class{
    position: absolute;
    bottom: 0;
    right: 0;
}

<HTML>
<div class="form-group new-button-container-class">
                    <button type="button" class="btn btn-info" id="dugme">Dodaj</button>
                </div>

1. Спасибо, ты спасатель! Вы понятия не имеете, как долго я боролся, и в Интернете нет ничего даже похожего на мою проблему. Моим последним вариантом было опубликовать вопрос здесь.

Ответ №2:

Добавьте

 position: absolute;

Это заставляет ваш элемент оставаться на позиции. Поэтому эта функция называется абсолютной. position Свойство определяет тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный, фиксированный или липкий). Его синтаксис должен использоваться как position: static|absolute|fixed|relative|sticky|initial|inherit; . Или, если вам нравится использовать подход javascript:

 object.style.position="absolute"

Для общего изменения использования:

  #dugme {    
    font-weight: bold;
    left: 15vw;
    line-height: 2vw;
    color: white;
    background-color: rgb(17, 142, 146);
    text-align: center;
    border: white 2px solid;
}

Для:

  #dugme {    
    font-weight: bold;
    left: 15vw;
    line-height: 2vw;
    color: white;
    background-color: rgb(17, 142, 146);
    text-align: center;
    border: white 2px solid;
    position: absolute;
}

Теперь все, что вам нужно сделать, это просто выровнять все правильно.

1. Я все еще не настолько знаком с JS, хотя я мог бы поэкспериментировать. К сожалению, это не работает, но только усугубляет проблему.

2. Вам не обязательно использовать опцию javascript. Вы могли бы просто выбрать опцию CSS, которую я перечислил в верхней части моего ответа. РЕДАКТИРОВАТЬ: я изменил свой ответ. Это должно сработать.

3. Спасибо, но, к сожалению, это все еще не сработало. Комментарий другого парня, наконец, исправил это. В любом случае спасибо!

Метки: Текст продолжает нажимать кнопку в bootstrap