Блог

Пробовал все возможные способы, но безуспешно:

     <div style="float: right">
        <button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="declineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">amp;times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Comment</h4>
                    </div>
                    <div class="modal-body">
                        <textarea class="form-control col-xs-12"></textarea>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger">Decline</button>
                </div>
            </div>
        </div>
    </div> 
  

Как сделать так, чтобы текстовая область в модальном body div покрывала все доступное пространство шириной 100%?

Попробуйте добавить min-width: 100% к стилю вашей текстовой области:

 <textarea class="form-control" style="min-width: 100%"></textarea>
  

Если я правильно понимаю, это то, что вы ищете.

 .form-control { width: 100%; }
  

Смотрите демонстрацию на JSFiddle.

Предоставленные решения действительно решают проблему. Однако они также влияют на все другие textarea элементы с тем же стилем. Я должен был решить это и просто создал более конкретный селектор. Вот что я придумал, чтобы предотвратить инвазивные изменения.

 .modal-content textarea.form-control {
    max-width: 100%;
}
  

Хотя этот селектор может показаться агрессивным. Это помогает ограничить textarea область содержимого самого модала.

Кроме того, min-width решение, представленное выше, работает с базовыми модальностями начальной загрузки, хотя у меня были проблемы при его использовании с модальностями angular-ui-bootstrap.

Вы также можете просто добавить атрибут row="number of rows" и cols="number of columns" , например

 <div class="modal-body">
    <textarea class="form-control col-xs-12" rows="7" cols="50"></textarea>
</div>
  

Это увеличит количество строк в текстовой области, которое очень похоже на style="min-height: 100%" 100% или 80%, min-width: 50% по ширине и т.д. Также row=7 изменяет высоту и cols=50 изменяет ширину текстовой области.

У меня была та же проблема. Я исправил это, добавив этот фрагмент кода в стиль текстовой области.

 resize: vertical;
  

Вы можете проверить ссылку на Bootstrap здесь

После тестирования приведенных здесь предложений я прихожу к выводу, что мы должны применить две вещи.

1. Примените form-control класс к вашему textarea элементу. Это один из встроенных классов Bootstrap.

2. Расширьте этот класс, добавив следующее свойство:

 .form-control {
   max-width: 100%;
}
  

Надеюсь, это поможет другим, кто ищет решение этой проблемы.

Я новичок в программировании на .NET / MVC, но, насколько я понимаю, файл Site.css (в папке Content в MVC) является переопределением на уровне сайта для Bootstrap CSS, позволяющим переопределять собственные настройки bootstrap переносимым и неразрушающим образом (например, вы можете легко сохранить и повторно применить изменения site.css при обновлении Bootstrap в вашей системе.)

В Bootstrap 3.0.0 Site.css имеет следующую настройку стиля:

 /* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
  

Другие блоги предполагают, что эта ширина в 280 пикселей была добавлена в спешке перед датой выпуска, в желании сделать пользовательский интерфейс лучше, чем при вводе шириной 100%. К счастью, она была размещена в «видимом» месте в файле сайта, чтобы вы могли ее заметить.

Просто измените настройку ширины либо для всех трех типов ввода, либо извлеките textarea и задайте ему собственную настройку, если хотите оставить остальные в покое.