img class ="圆圈"是不是在asp.net中创建一个圆形的圆圈

时间:2017-11-17 04:02:38

标签: asp.net-mvc twitter-bootstrap-3

我在asp.net mcv应用程序中使用bootstrap。我希望图像是圆形的。因此使用" img class ="圆圈"。代码如下。

  

的index.html

@{
ViewBag.Title = "Home Page";
 }

<h1 class="my-4">
  About Us
  <small>It's Nice to Meet You!</small>
</h1>

<div class="row">
  <div class="col-lg-12">
    <h2 class="my-4 text-center">Our Services</h2>
  </div>

  <div class="col-lg-4 col-sm-6 text-center mb-4">
    <a href="Application/Search">
        <img class="rounded-circle img-fluid d-block mx-auto" src="~/Images/search.png" alt="">
    </a>
    <h3>Search App</h3>
    <p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
   </div>

   <div class="col-lg-4 col-sm-6 text-center mb-4">
    <a href="Application/TTS">
        <img class="rounded-circle img-fluid d-block mx-auto" src="~/Images/text-to-speech.png" alt="">
    </a>
        <h3>Text-to-Speech</h3>
        <p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
  </div>

  <div class="col-lg-4 col-sm-6 text-center mb-4">
    <a href="Application/SpeechRecognition">
        <img class="rounded-circle img-fluid d-block mx-auto" src="~/Images/speech-recognition.jpg" alt="">
    </a>
        <h3>Speech Recognition</h3>
        <p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
  </div>

  <div class="col-lg-4 col-sm-6 text-center mb-4">
    <a href="Application/VAvatar">
        <img class="rounded-circle img-fluid d-block mx-auto" src="~/Images/virtual-avatar.jpg" alt="">
    </a>
        <h3> Virtual Avatar</h3>
        <p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
  </div>

  <div class="col-lg-4 col-sm-6 text-center mb-4">
    <a href="Application/VAvatar">
        <img class="rounded-circle img-fluid d-block mx-auto" src="~/Images/text-to-speech.png" alt="">
    </a>
        <h3>John Smith</h3>
        <p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
  </div>

  <div class="col-lg-4 col-sm-6 text-center mb-4">
    <a href="Application/VAvatar">
        <img class="rounded-circle img-fluid d-block mx-auto" src="~/Images/text-to-speech.png" alt="">
    </a>
        <h3>John Smith</h3>
        <p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
  </div>

这就是它的样子 enter image description here

上面的代码应该给出一个圆形图像。但它仍然是正方形。这是为什么?

1 个答案:

答案 0 :(得分:2)

对于Bootstrap,您应该添加tournament而不是img-circle。请参阅示例here试一试。