Как ограничить текст с помощью Bootstrap? - PullRequest
Новая
       0

Как ограничить текст с помощью Bootstrap?

0 голосов
/ 05 июня 2018

В настоящее время я создаю свой первый веб-сайт «Обо мне», который будет соответствовать моему портфолио, поскольку я собираюсь подать заявку на мою первую работу в области ИТ на следующей неделе.Мне посоветовали создать его с помощью Bootstrap, и я задаюсь вопросом: есть ли какой-нибудь готовый к загрузке компонент, который позволяет красиво граничить с текстом, чтобы он выглядел более профессионально?

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

Я думаю, что смогу сделать это в CSS, но мой преподаватель сказал, что это Bootstrap выполнимо.Однако я не смог найти его в документации, попытался выполнить поиск с использованием «окаймленного текста», «текста в коробке» и т. Д., Но ничего не показывалось.

Любая помощь приветствуется.

Чего бы я хотел достичь

Не забудьте упомянуть код

Спасибо за вашу помощь!

И мне очень жаль, ребята.Я забыл добавить свой собственный код.Вот мои усилия (это должен быть раздел о моей карьере журналиста): 

<div class="journalism">
        <div class="container">
            <div class="row justify-content-md-center">
                <div class="col-md-3">
                </div>
                <div class="col-md-6">
                    <h3>Journalism</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="col-md-3">
                </div>
            </div>
        </div>
    </div>

Что касается CSS: 

.container {
    height: 50vh;
}

.row {
    border: 1px solid black;
}

.journalism {
    margin: 0;
    background-image: url("https://images.pexels.com/photos/518543/pexels-photo-518543.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
    background-position: center;
    background-size: cover;
    filter: sepia();
}

Я тоже пытаюсь сделать то же самое, но сIMG в качестве фона.

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

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

Здравствуйте, я не знаю, какое количество загрузочного решения вы хотите.

Я старался изо всех сил, чтобы полностью зависеть от начальной загрузки.

ОБНОВЛЕН * :: fieldset класс для фона.В этом случае вы должны изменить цвет текста также для лучшей читаемости.

Надеюсь, это то, что вы хотите.

Давайте попробуем ... 

 <head>
   <style >
       fieldset{
          background: url("https://images.pexels.com/photos/518543/pexels-photo-518543.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
          background-repeat:no-repeat;
          background-position:center;
          background-size:cover;
}
       p#innerPara{padding:20px ;}
       legend{width:200px;padding:10px 20px;}
    </style>
 </head>

 <body>

  <div class='container'>
   <div class="col-lg-6">
     <fieldset class="border" >
       <legend class ='text-center'>About Us</legend>


         <p id="innerPara">
            Lorem Ipsum is simply dummy text of the printing and 
            typesetting industry. Lorem Ipsum has been the industry's
            standard dummy text ever since the 1500s, when an unknown 
             printer took a galley of type and scrambled it to make a type
              specimen book. It has survived not only five 
             centuries, but also the leap into electronic typesetting, 
             remaining essentially unchanged. It was popularised 
             in the 1960s with the release of Letraset sheets containing 
             Lorem Ipsum passages, and more recently with desktop 
             publishing software like Aldus PageMaker including 
             versions of Lorem Ipsum.

       </p>
 </fieldset>
 </div>

MyOutput Если возникнет путаница, спросите в комментарии.

enter image description here

enter image description here

0 голосов
/ 05 июня 2018

Используется HTML, CSS не относится к начальной загрузке.Ниже приведен образец 

hr{
  display: inline-block;
  width: 200px;
  margin: 0 !important;
  padding: 0 !important;
}

span{
  width: 100px !important;
  display: inline-block;
  text-align: center;
}

#container{
  width: 510px;
  height: 100px;
  border-right: 1px solid black;
  border-left: 1px solid black;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid black;
}
    <hr>
    <span> about </span>
    <hr>
    <div id="container"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...