Блог

Главная - Вопросы по программированию - Bootstrap как оставить текст без ответа, но внутри div?

Bootstrap как оставить текст без ответа, но внутри div?

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

На мобильном устройстве текст выглядит следующим образом:

введите описание изображения здесь

но мне нужно, чтобы он оставался таким:

![введите описание изображения здесь

Код, который я использую:

 <div class="container-fluid">
    <div class="row" style="background-color:#071885;">
        <div class="col-md-12 text-center">     
            <h1 style="color: #000;font-weight: bold;background: gold;font-size: 24px; padding: 5px;">
            LONG TITLE LONG TITLE LONG TITLE LONG TITLE LONG TITLE
            </h1>
         </div>
    </div>
    </div>

Я уже пробовал no-wrap , но это не сработало.

Обновить:

@kukkuz

введите описание изображения здесь

Ответ №1:

Для этого вы можете использовать flexbox:

  1. Установите display: inline-flex в строке и используйте тот факт, что встроенный элемент будет распространяться на его содержимое.

  2. Теперь вы можете использовать text-nowrap class or white-space: nowrap для получения нужного вам эффекта — смотрите демонстрацию ниже:

 .row {
  display: inline-flex; /* ensures the text stays inside */
  white-space: nowrap;
  min-width: 100vw; /* sets 100% width in desktop */
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid">
  <div class="row" style="background-color:#071885;">
    <div class="col-md-12 text-center">
      <h1 style="color: #000;font-weight: bold;background: gold;font-size: 24px; padding: 5px;">
        LONG TITLE LONG TITLE LONG TITLE LONG TITLE LONG TITLE
      </h1>
    </div>
  </div>
</div>

Комментарии:

1. большое вам спасибо за ответ, я только что вернулся к работе над ним, извините за задержку с ответом. Это все еще не решило проблему. Оказывается, что предложенный вами способ не настроен. Я обновил свой вопрос, пожалуйста, смотрите

2. можете ли вы обновить свой код, а также создать сниппет / jsfiddle, чтобы мы могли вам помочь 🙂

3.вам нужен только один container-fluid класс на странице начальной загрузки… Посмотрите на эту скрипку — вы можете использовать display: inline-block для получения желаемого эффекта

4. также добавьте код jsfiddle, который вы мне дали, к вашему вопросу, я соответствующим образом обновлю ответ, если это сработает для вас…

Ответ №2:

удалите этот класс col-md-12 и задайте стили, которые вы хотите

Комментарии:

1. даже при удалении класса col-md-12 результатом является первое изображение. Какой стиль мне следует добавить, чтобы текст оставался внутри container-fluid div, но жидкий div контейнера соответствовал тексту, а не тексту, если он соответствует контейнеру