如何将文本移到容器的左侧？

Question

I've tried margin 0 auto in the css but it didn't seem to work, i'm not quite sure what i'm doing wrong, could anyone help me? 我已经尝试在CSS中使用margin 0 auto，但是它似乎没有用，我不太确定自己在做什么错，有人可以帮助我吗？ I would like to move the text to touch the left side of the container because as of now it is in the middle of the container. 我想将文本移到容器的左侧，因为到目前为止，它位于容器的中间。 The text I'm talking about is the text in the p tags, which are the email, Facebook, instagram, and twitter. 我正在谈论的文本是p标签中的文本，它们是电子邮件，Facebook，instagram和twitter。 Thanks for taking the time to help. 感谢您抽出宝贵的时间来帮助您。 Have a good day! 祝你有美好的一天！

html: HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head> 
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a></li>
                <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a></li>
                <li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a></li>
            </ul>

        </div>
    </div>
</nav>

    <div class="container">
      <div class="jumbotron">
        <p style="font-size:24px;"></p>ppinzon-iradian@hotmail.com</p>
        </br>
        <p><a>Facebook</a></p>
        <p><a>Instagram</a></p>
        <p><a>Twitter</a></p>
      </div>

    </div> <!-- /container -->

<div>
</div>
</body>
</html>

Css: CSS：

.navbar-default{
    background: #fff;
    margin-top:3.5%;
    border:0px;
}

.navbar-brand
{
    font-family: helvetica;
    font-size: 24px;
}

ul, li, a
{
    font-family: helvetica;
    font-size: 24px;
    color: #000000;
    letter-spacing: -0.5px;
    font-weight: 100;
}

.navbar-toggle
{
    border:0px;
}

.col-xs-6
{
    margin-top:1.5%;
    line-height: 27px;
}

.row
{
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}

.jumbotron
{
    background: #fff;
    border:0px;
    font-family: helvetica;
    font-size: 24px;
    text-decoration: none;
}

Answer 1

The elements you want to remove the margin are inside a .jumbotron element, this is styled by bootstrap and will add those margins/paddings. 您要删除边距的元素位于.jumbotron元素内，该元素由引导程序设置样式，并将添加这些边距/填充。 Check the docs for jumbotron 在docs上查看jumbotron

<div class="jumbotron">

You can either override the styles by adding !important in your styles (bust me after the bootstrap styles), or use another bootstrap component other thant jumbotron. 您可以通过在样式中添加!important来覆盖样式（在引导样式之后让我烦恼），也可以使用jumbotron以外的其他引导组件。

Answer 2

If you mean text in .jumbotron class, you can simply remove padding-left in 如果您的意思是.jumbotron类中的文本，则只需删除中的padding-left

@media screen and (min-width: 768px) {
    .container .jumbotron, .container-fluid .jumbotron {
        padding-right: 60px;
        padding-left: 0;
    }
}

or simply remove it 或只是将其删除

@media screen and (min-width: 768px) {
    .container .jumbotron, .container-fluid .jumbotron {
        padding-right: 60px;
    {
}

Answer 3

Currently there's a large padding surrounding the p elements. 当前， p元素周围有很大的填充。 To fix that without overriding it using bootstrap class, add new class no-padding or something then override it on the css targeting that new class. 要解决此问题而又不使用bootstrap类覆盖它，请添加新类no-padding ，然后在针对该新类的css上覆盖它。

eg 例如

HTML HTML

<div class="container">
  <div class="jumbotron no-padding">
    <p style="font-size:24px;"></p>ppinzon-iradian@hotmail.com</p>
    </br>
    <p><a>Facebook</a></p>
    <p><a>Instagram</a></p>
    <p><a>Twitter</a></p>
  </div>

</div> <!-- /container -->

CSS CSS

.container .jumbotron.no-padding
{
    background: #fff;
    border:0px;
    font-family: helvetica;
    font-size: 24px;
    text-decoration: none;
    padding-left: 0;
    padding-right: 0;
}

Fiddle 小提琴

Answer 4

Remove the left padding from the jumbotron container, either through your css page or inline styling. 通过css页面或内联样式，从jumbotron容器中除去左侧填充物。

Example: 例：

<div class="jumbotron" style="padding-left:0px;">
// your content here
</div>

or (using css): 或（使用CSS）：

.jumbotron {
     padding-left: 0px !important;
}

Fiddle: https://jsfiddle.net/mwatz122/614wjpjh/ 小提琴： https : //jsfiddle.net/mwatz122/614wjpjh/

如何将文本移到容器的左侧？

问题描述

4 个解决方案

解决方案1
0 2015-08-31 19:40:43

解决方案2
0 2015-08-31 19:43:37

解决方案3
0 已采纳 2015-08-31 19:45:00

解决方案4
0 2015-08-31 19:45:13

如何将文本移到容器的左侧？

问题描述

4 个解决方案

解决方案1 0 2015-08-31 19:40:43

解决方案2 0 2015-08-31 19:43:37

解决方案3 0 已采纳 2015-08-31 19:45:00

解决方案4 0 2015-08-31 19:45:13

解决方案1
0 2015-08-31 19:40:43

解决方案2
0 2015-08-31 19:43:37

解决方案3
0 已采纳 2015-08-31 19:45:00

解决方案4
0 2015-08-31 19:45:13