Изменение ширины бутстрапа

Я разрабатываю страницу с помощью Bootstrap 3. Я пытаюсь использовать popover с placement: right для элемента ввода. Новый Bootstrap гарантирует, что если вы используете form-control, у вас есть элемент ввода полной ширины.

Код HTML выглядит примерно так:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover" 
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

Ширина popovers слишком низкая, на мой взгляд, потому что у них нет никакой ширины, оставшейся в div. Я хочу, чтобы форма ввода была с левой стороны, и широкая папка с правой стороны.

В основном, я ищу решение, где мне не нужно переопределять Bootstrap.

Вложенный JsFiddle. Второй вариант ввода. Не использовали jsfiddle много, поэтому не знаю, но попробуйте увеличить размер окна вывода, чтобы увидеть результаты, на маленьких экранах даже не увидели бы его. http://jsfiddle.net/Rqx8T/

ОТВЕТЫ

Ответ 1

<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

В основном я помещаю код popover в строку div вместо входного div. Решила проблему.

Ответ 2

Увеличить ширину с помощью CSS

Вы можете использовать CSS для увеличения ширины вашего popover, например:

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Если это не сработает, вам, вероятно, понадобится решение ниже и измените ваш элемент container. (Просмотр JSFiddle)

Содержимое загрузочного контейнера Twitter

Если это не работает, вам, вероятно, нужно указать контейнер:

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

Подробнее

Twitter Bootstrap popover increase width

Попсор содержится внутри элемента, в который он запускается. Чтобы расширить его "полная ширина" - укажите контейнер:

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

JSFiddle

Просмотрите JSFiddle, чтобы попробовать.

JSFiddle: http://jsfiddle.net/xp1369g4/

Ответ 3

Мне также понадобилось более широкое поле для текстового поля поиска. Я придумал это решение Javascript (здесь, в Coffee):

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

Обходной путь находится в последней строке. Перед отображением popover параметр max-width устанавливается на пользовательское значение. Вы также можете добавить пользовательский класс к элементу tip.

Ответ 4

У меня была та же проблема. Провел довольно много времени на поиск ответа и нашел свое решение: Добавьте следующий текст в голову:

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>

Ответ 5

Чтобы изменить ширину, вы можете использовать css

Для фиксированного размера

.popover{
    width:200px;
    height:250px;    
}

Для максимальной ширины:

.popover{
    max-width:200px;
    height:250px;    
}

jsfiddle: http://jsfiddle.net/Rqx8T/2/

Ответ 6

Чтобы изменить ширину popover, вы можете переопределить шаблон:

$('#name').popover({
    template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})

Ответ 7

С помощью того, что @EML описал выше относительно popover на модальных окнах, а также код, показанный @2called-chaos, я решил эту проблему.

У меня есть значок на модале, который при нажатии должен всплывать

Мой HTML

<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>

Мой Script

    $('[rel=popover]').popover({
        placement: 'bottom',
        html: 'true',
        container: '#name-of-modal-window .modal-body'
    }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });

Ответ 8

Нет окончательного решения здесь:/Просто некоторые мысли о том, как "чисто" решить эту проблему...

Обновленная версия (jQuery 1.11 + Bootstrap 3.1.1 + class= "col-xs-" вместо class= "col-md-" ) исходного JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

Теперь тот же JSFiddle с вашим предлагаемым решением: http://jsfiddle.net/tkrotoff/N99h7/8/ < ш > Это не работает: popover позиционируется относительно <div class="col-*"> +, представьте, что у вас есть несколько входов для одного и того же <div class="col-*">...

Итак, если мы хотим сохранить popover на входах (семантически лучше):

  • .popover { position: fixed; }: но при каждом прокрутке страницы, popover не будет следовать прокрутке
  • .popover { width: 100%; }: не так хорошо, поскольку вы все еще зависите от ширины родителя (i.e <div class="col-*">
  • .popover-content { white-space: nowrap; }: хорошо, только если текст внутри popover короче max-width

См. http://jsfiddle.net/tkrotoff/N99h7/11/

Возможно, используя самые последние браузеры, новые значения ширины CSS могут решить проблему, я не пробовал.

Ответ 9

container: 'body' обычно выполняет трюк (см. ответ JustAnil выше), но есть проблема, если ваш popover находится в модальном режиме. z-index помещает его за модальный, когда popover привязан к body. Это похоже на вопрос BS2 5014, но я получаю его на 3.1.1. Вы не должны использовать container для body, но если вы исправите код для

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

тогда вы исправляете проблему z-index, но ширина popover по-прежнему не соответствует.

Единственное исправление, которое я могу найти, это использовать container: 'body' и добавить дополнительные css:

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

Обратите внимание, что сами решения css не будут работать.

Ответ 10

Вы можете использовать атрибут data-container = "body" внутри popover

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>

Ответ 11

Здесь не-coffeescript способ сделать это с зависанием:

$(".product-search-trigger").popover({
    trigger: "hover",
    container: "body",
    html: true,
    placement: "left"
  }).on("show.bs.popover", function() {
    return $(this).data("bs.popover").tip().css({
      maxWidth: "300px"
    });
  });
});

Ответ 12

Вы можете настроить ширину popover с помощью методов, указанных выше, но лучше всего определить ширину содержимого до того, как Bootstrap увидит, и выполнит его математику. Например, у меня была таблица, я определил ее ширину, а затем bootstrap построил popover для этого. (Иногда Bootstrap имеет проблемы с определением ширины, и вам нужно войти и удерживать руку)

Ответ 13

Для людей, которые предпочитают решение JavaScript. В Bootstrap 4 tip() стал getTipElement() и возвращает объект без jQuery. Таким образом, чтобы изменить ширину поповера в Bootstrap 4, вы можете использовать:

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

Ответ 14

вы также можете добавить data-container = "body", который должен выполнить задание:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover"

                         data-container="body"

                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

Ответ 15

Я использовал это (отлично работает):

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}

Ответ 16

 <label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover"  data-placement="right" id="Pops" ></a>  
<div id="popover-content" class="hide">
  <div class="popovermenu">
        Your content                   
  </div>
 </div>

В итоге я установил ширину div "popover-content" в нужное мне число. (другие идентификаторы или класс не будут работать.....) Удачи!

  #popover-content{
      width: 600px;

  }

Ответ 17

Одно тестируемое решение для бета-версии Bootstrap 4:

.popover {
        min-width: 30em !important;
    }

Вместе с оператором jQuery:

$('[data-toggle="popover"]').popover({
      container: 'body',
      trigger: 'focus',
      html: true,
      placement: 'top'
    })

Боковое примечание, data-container="body" или container: "body" в HTML или в виде option к объекту popover({}) на самом деле не выполняло трюк [возможно, работа, но только вместе с инструкцией CSS];

Кроме того, помните, что Bootstrap 4 beta полагается на popper.js для его размещения и всплывающей подсказки (до этого было tether.js )

Ответ 18

Для машинописного компонента:

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: ['
        :host >>> .popover {
          max-width: 100%;
        }
    ']
})

Ответ 19

Попробуйте следующее:

var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));