Question

我正在制作第一个适合我的投资组合的“关于我”网站，因为我将在下周申请我的第一份IT工作。我被建议使用Bootstrap创建它，我想知道：是否有任何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为背景。

Answer 1

但是您还没有给出任何代码。这真是一个不好的做法。请发布一些代码。首先请求帮助。

您好我不知道您想要什么样的Bootstrap解决方案。

我尽力完全依赖bootstrap。

背景的

更新 :: 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中 如果有任何疑惑，请发表评论。

Answer 2

它使用的是html，css不是特定于bootstrap。以下是样本

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>

如何使用Bootstrap对文本进行边框处理？

2 个答案: